import Tabs from '@/lib/components/Tabs';
import Text from '@/lib/components/Text';
import { commonArgTypes } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';

const meta = {
  title: 'Navigation Component/Tabs',
  component: Tabs.Root,
  parameters: {
    layout: 'padded',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '관련성 있는 콘텐츠들의 집합으로, 하나를 활성화하여 표시'
      }
    }
  },
  argTypes: {
    color: {
      ...commonArgTypes.color,
      description: 'Tabs component 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium'],
      defaultValue: { summary: 'medium' },
      description: 'Tabs component 크기'
    }
  }
} as Meta;

export const Default = {
  render: (args: any) => ({
    components: {
      TabsRoot: Tabs.Root,
      TabsList: Tabs.List,
      TabsIndicator: Tabs.Indicator,
      TabsContent: Tabs.Content,
      TabsTrigger: Tabs.Trigger,
      Text: Text
    },
    setup() {
      return { args };
    },
    template: `
    <TabsRoot default-value="tab1" v-bind="args">
        <TabsList aria-label="Manage your account">
            <TabsIndicator></TabsIndicator>
            <TabsTrigger value="tab1" >
                <Text>Account</Text>
            </TabsTrigger>
            <TabsTrigger value="tab2" >
                <Text>Password</Text>
            </TabsTrigger>
        </TabsList>
        <TabsContent class="grow p-5" value="tab1">
            <Text size="2">
                Make changes to your account here. Click save when you're done.
            </Text>
        </TabsContent>
        <TabsContent class="grow p-5" value="tab2">
            <Text size="2">
                Change your password here. After saving, you'll be logged out.
            </Text>
        </TabsContent>
  </TabsRoot>
    `
  })
};
export default meta;