import type { Meta, StoryObj } from '@storybook/vue3'
import { UTabs } from '../components'
import { UTabsProps } from '../components/UTabs/UTabs'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UTabs> = {
  title: 'Example/Tabs',
  component: UTabs,
  tags: ['autodocs'],
  argTypes: {
    badge: { table: { disable: true } },
    size: { control: 'select', options: ['sm', 'md'] },
    variant: { control: 'select', options: ['underlined', 'button'] },
    tabItems: { table: { disable: true } },
    activeIndex: { table: { disable: true } },
    fullWidth: { control: 'boolean', defaultValue: false },
  },
}

export default meta

type Story = StoryObj<typeof UTabs>

export const BaseTabItem: Story = {
  render: (args: ExtractPropTypes<UTabsProps>) => ({
    components: { UTabs },
    setup() {
      return { args }
    },
    template: `<UTabs v-bind="args" class="h-fit"></UTabs>`,
  }),
  args: {
    size: 'sm',
    variant: 'underlined',
    tabItems: [
      {
        title: 'Checked in',
        variant: 'underlined',
        active: false,
        badge: '98',
      },
      {
        title: 'Due-in-Guests',
        variant: 'underlined',
        active: false,
      },
      {
        title: 'Checked out',
        variant: 'underlined',
        active: false,
      },
      {
        title: 'Pending',
        variant: 'underlined',
        active: false,
      },
    ],
    activeIndex: 1,
  } as UTabsProps,
}