import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplChip from './RplChip.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const SingleTemplate = (args) => ({
  components: { RplChip },
  setup() {
    return { args }
  },
  template: '<div class="sb-container"><RplChip v-bind="args" /></div>'
})

export const ManyTemplate = (args) => ({
  components: { RplChip },
  setup() {
    return { args }
  },
  template: '<div class="sb-container"><RplChip v-bind="args" /><RplChip v-bind="args" /></div>'
})

<Meta
  title='Core/Navigation/Chip'
  component={RplChip}
  argTypes={{
    variant: {
      control: { type: 'radio' },
      options: ['default', 'reverse']
    }
  }}
  args={{
    label: 'Chip',
    variant: 'default',
    url: 'https://vic.gov.au'
  }}
/>

# Chip

<ArgsTable of={RplChip} />

## Default

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

## Example / Two chips

<Canvas>
  <Story
    name='Example/Two chips'
    play={a11yStoryCheck}
  >
    {ManyTemplate.bind()}
  </Story>
</Canvas>

## Reverse

<Canvas>
  <Story
    name='Reversed'
    parameters={{
      background: 'reverse'
    }}
    args={{
      variant: 'reverse'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
