import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'
import { useArgs } from '@storybook/client-api'

import Tabs from '@baserow/modules/core/components/Tabs'
import Tab from '@baserow/modules/core/components/Tab'

<Meta
    title="Baserow/Tabs"
    component={Tabs}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        default: {
            defaultValue: 'Label',
        },
    }}
/>

# Tabs

export const Template = (args, { argTypes, updateArgs }) => ({
    methods: {
        action,
    },
    components: { Tabs, Tab },
    props: Object.keys(argTypes),
    template: `
    <Tabs v-bind="$props">
        <Tab title="Tab 1">
            This is a tab content
        </Tab>
        <Tab title="Tab 2">
            This is another tab content
        </Tab>
         <Tab title="Tab 3">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
        </Tab>
        <Tab title="Tab 4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </Tab>
    </Tabs>`,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?mode=dev',
}

<Canvas>
    <Story
        name="Default"
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Tabs></Tabs>
```

## Props

<Props of={Tabs} />