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

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

<Meta title='Forms/Option buttons' component={RplFormOptionButtons} args={{
  id: 'ob-default',
  name: 'ob-default'
}} />

# Forms

<ArgsTable of={RplFormradio} />

<Canvas>
  <Story
    name='Squares'
    args={{
      id: 'squares',
      options: Array(26).fill(0).map((_, i) => String.fromCharCode(97 + i)).map((char) => {
        return {
          id: char,
          label: char.toUpperCase()
        }
      }),
      value: 'd',
      perfectSquares: true
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Fluid widths'
    args={{
      id: 'fluid',
      options: [
        {
          id: 'item-1',
          label: 'Apple',
        },
        {
          id: 'item-2',
          label: 'Oranges',
        },
        {
          id: 'item-3',
          label: 'Pear',
        },
        {
          id: 'item-4',
          label: 'Strawberries',
        },
        {
          id: 'item-5',
          label: 'Watermelon',
        },
      ],
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Very long label'
    args={{
      id: 'long-label',
      options: [
        {
          id: 'item-1',
          label: 'Apple',
        },
        {
          id: 'item-2',
          label: 'Oranges',
        },
        {
          id: 'item-3',
          label: 'Here is an option with a very long label, it should still be readable. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        },
        {
          id: 'item-4',
          label: 'Strawberries',
        },
        {
          id: 'item-5',
          label: 'Watermelon',
        },
      ],
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Inactive'
    args={{
      id: 'inactive',
      disabled: true,
      options: Array(26).fill(0).map((_, i) => String.fromCharCode(97 + i)).map((char) => {
        return {
          id: char,
          label: char.toUpperCase()
        }
      }),
      value: 'd',
      perfectSquares: true
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
