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

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

<Meta
  title='Core/Navigation/Tabs'
  component={RplTabs}
  argTypes={{
    activeTab: {
      control: { type: 'text' }
    },
    mode: {
      control: 'radio',
      options: ['horizontal', 'vertical']
    }
  }}
/>

# Tabs

<ArgsTable of={RplTabs} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      tabs: [
        {
          title: 'Default',
          key: 'default',
        },
        {
          title: 'Extra',
          key: 'extra'
        },
        {
          title: 'More',
          key: 'more',
          icon: 'pin'
        }
      ],
      activeTab: 'default',
      mode: 'horizontal'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Vertical'
    play={a11yStoryCheck}
    args={{
      tabs: [
        {
          title: 'Default',
          key: 'default',
        },
        {
          title: 'Extra',
          key: 'extra'
        },
        {
          title: 'More',
          key: 'more',
          icon: 'pin'
        }
      ],
      activeTab: 'default',
      mode: 'vertical'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
