import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"

import VTabs from "~/components/VTabs/VTabs.vue"
import VTabPanel from "~/components/VTabs/VTabPanel.vue"
import VTab from "~/components/VTabs/VTab.vue"

<Meta
  title="Components/VTabs"
  component={VTabs}
  argTypes={{
    variant: {
      options: ["bordered", "plain"],
      control: { type: "radio" },
    },
    close: {
      action: "close",
    },
    change: {
      action: "change",
    },
  }}
/>

export const Template = (args) => ({
  template: `<VTabs v-bind="args" v-on="args"><template #tabs>
<VTab id='1'>Tab1</VTab><VTab id='2'>Tab2</VTab><VTab id='3'>Tab3</VTab>
</template>
<VTabPanel id='1'>Page 1 content</VTabPanel>
<VTabPanel id='2'>Page 2 content</VTabPanel>
<VTabPanel id='3'>Page 3 content</VTabPanel>
</VTabs>`,
  component: { VTabs },
  subcomponents: { VTab, VTabPanel },
  setup() {
    return { args }
  },
})

# Tabs

<Description of={VTabs} />

<ArgsTable of={VTabs} />

## Default tabs

By default, tabs are bordered and use automatic activation of the tab panel when
the tab is focused on, such as the attribution panels in Openverse.

<Canvas>
  <Story
    name="Default"
    args={{
      label: "Default tabs story",
      selectedId: "1",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

### Navigation

`←` and `→`: changes the focused (and selected, if not manual) tab to previous
or next. Tab navigation wraps, so if you click `→` on the last tab, you select
the first tab.

`tab`: navigate to the tablist and then to the selected tabpanel. The tabs use
'rowing index' to only allow to tab to the currently selected tab using
keyboard.

`home`, `end`: set the first or the last tab as focused (or selected).

## Manual plain tabs

To activate the tabs using keyboard, you need to focus on the tab you want by
using the `Tab` key, and then click `Space` or `Enter`.

These tabs also use the second available variant, `plain`.

<Canvas>
  <Story
    name="Manual plain tabs"
    args={{
      label: "Manual plain tabs",
      selectedId: "1",
      manual: true,
      variant: "plain",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
