import { ref, toRefs } from 'vue'
import { type Meta } from '@storybook/vue3'
import ARKTabs from '../ARKTabs.vue'

export default {
  title: 'The Design system/Tabs',
  component: ARKTabs,
  tags: ['autodocs'],
  argTypes: {
    tabs: {
      description: 'Список табов',
      control: 'array',
    },
    size: {
      control: 'select',
      options: ['S', 'M'],
    },
    activeTab: {
      control: 'none',
    },
  },
  args: {
    tabs: [
      {
        id: 1,
        label: 'Tab 1',
        disabled: false,
      },
      {
        id: 2,
        label: 'Tab 2',
        disabled: false,
      },
      {
        id: 3,
        label: 'Tab 3',
        disabled: true,
      },
    ],
    size: 'M',
  },
} satisfies Meta<typeof ARKTabs>

const Template = (args: any) => ({
  setup() {
    const { size, tabs } = toRefs(args)
    const activeTab = ref(tabs.value[0].id)

    return () => (
      <ARKTabs
        tabs={tabs.value}
        size={size.value}
        v-model:activeTab={activeTab.value}
      />
    )
  },
})

export const Primary = Template.bind({})