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

export const SingleTemplate = (args) => ({
  components: { RplFormTextarea },
  setup() {
    return { args }
  },
  template: '<RplFormTextarea v-bind="args" />'
})

<Meta
  title='Forms/Textarea'
  component={RplFormTextarea}
  argTypes={{
    minlength: {
      control: { type: 'number' }
    },
    maxlength: {
      control: { type: 'number' }
    }
  }}
/>

# Forms

<ArgsTable of={RplFormTextarea} />

<Canvas>
  <Story
    name='Default'
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Reverse'
    parameters={{
      background: 'gray'
    }}
    args={{
      placeholder: 'Example placeholder',
      variant: 'reverse'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Error'
    args={{
      invalid: true,
      value: 'Example content'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Inactive'
    args={{
      disabled: true,
      value: 'Example content'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
