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

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

<Meta title='Forms/Input' component={RplFormInput} />

# Forms

<ArgsTable of={RplFormInput} />

<Canvas>
  <Story
    name='Default'
    args={{
      type: 'text',
      placeholder: 'Enter some text'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

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

<Canvas>
  <Story
    name='with Icons'
    args={{
      prefixIcon: 'icon-arrow-left',
      suffixIcon: 'icon-arrow-right',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Inactive'
    args={{
      disabled: true,
      prefixIcon: 'icon-arrow-left',
      suffixIcon: 'icon-arrow-right',
      value: 'Some value'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

