import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplFormAlert from './RplFormAlert.vue'

export const SingleTemplate = (args) => ({
  components: { RplFormAlert },
  setup() {
    return { args }
  },
  template: `<RplFormAlert v-bind="args">
    {{args.description}}
  </RplFormAlert>`
})

<Meta title='Forms/Form alert' component={RplFormAlert} />

# Forms

<ArgsTable of={RplFormAlert} />

<Canvas>
  <Story
    name='Success'
    args={{
      title: 'Form submitted',
      description: 'Custom message',
      status: 'success',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Error'
    args={{
      title: 'Form not submitted',
      description: 'Custom message',
      status: 'error',
      fields: [
        {
          fieldId: '123',
          text: 'Field 1'
        },{
          fieldId: '456',
          text: 'Field 2'
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
