import type { Meta, StoryObj } from '@storybook/vue3'
import FdsTabsItem from '../FdsTabsItem/FdsTabsItem.vue'
import FdsTabs from './FdsTabs.vue'

const meta: Meta<typeof FdsTabs> = {
  title: 'FDS/FdsTabs',
  component: FdsTabs,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: { type: 'select' }, options: ['primary', 'secondary'] },
    block: { control: { type: 'boolean' } },
  },
  args: {
    variant: 'primary',
    block: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

const tabsTransform = (storyContext: { args?: { block?: boolean; variant?: string } }) => {
  const args = storyContext?.args || {}
  const attrs = []
  if (args.block) attrs.push(':block="true"')
  if (args.variant && args.variant !== 'primary') attrs.push(`variant="${args.variant}"`)
  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
  return `<FdsTabs${attrsStr}>
  <FdsTabsItem label="Tab 1" />
  <FdsTabsItem label="Tab 2" active />
  <FdsTabsItem label="Tab 3" />
</FdsTabs>`
}

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Tab 1" />
        <FdsTabsItem label="Tab 2" active />
        <FdsTabsItem label="Tab 3" />
      </FdsTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        transform: tabsTransform,
      },
    },
  },
}

export const Secondary: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Tab 1" />
        <FdsTabsItem label="Tab 2" active />
        <FdsTabsItem label="Tab 3" />
      </FdsTabs>
    `,
  }),
  args: {
    variant: 'secondary',
  },
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs variant="secondary">
  <FdsTabsItem label="Tab 1" />
  <FdsTabsItem label="Tab 2" active />
  <FdsTabsItem label="Tab 3" />
</FdsTabs>
        `,
      },
    },
  },
}

export const Block: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Tab 1" />
        <FdsTabsItem label="Tab 2" active />
        <FdsTabsItem label="Tab 3" />
      </FdsTabs>
    `,
  }),
  args: {
    block: true,
  },
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs :block="true">
  <FdsTabsItem label="Tab 1" />
  <FdsTabsItem label="Tab 2" active />
  <FdsTabsItem label="Tab 3" />
</FdsTabs>
        `,
      },
    },
  },
}

export const WithDisabled: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Tab 1" />
        <FdsTabsItem label="Tab 2" active />
        <FdsTabsItem label="Tab 3" disabled />
      </FdsTabs>
    `,
  }),
  parameters: {
    slots: {
      default: {
        template: `
        <FdsTabsItem label="Tab 1" />
        <FdsTabsItem label="Tab 2" active />
        <FdsTabsItem label="Tab 3" disabled />
        `,
      },
    },
  },
}

export const WithRouterLinks: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Home" to="/" />
        <FdsTabsItem label="About" to="/about" />
        <FdsTabsItem label="Contact" to="/contact" />
      </FdsTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs>
  <FdsTabsItem label="Home" to="/" />
  <FdsTabsItem label="About" to="/about" />
  <FdsTabsItem label="Contact" to="/contact" />
</FdsTabs>
        `,
      },
    },
  },
}

export const WithExactMatch: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Home" to="/" exact />
        <FdsTabsItem label="About" to="/about" exact />
        <FdsTabsItem label="Contact" to="/contact" exact />
      </FdsTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs>
  <FdsTabsItem label="Home" to="/" exact />
  <FdsTabsItem label="About" to="/about" exact />
  <FdsTabsItem label="Contact" to="/contact" exact />
</FdsTabs>
        `,
      },
    },
  },
}

export const WithAnchorLinks: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Home" href="/" />
        <FdsTabsItem label="About" href="/about" />
        <FdsTabsItem label="Contact" href="/contact" />
      </FdsTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs>
  <FdsTabsItem label="Home" href="/" />
  <FdsTabsItem label="About" href="/about" />
  <FdsTabsItem label="Contact" href="/contact" />
</FdsTabs>
        `,
      },
    },
  },
}

export const WithButtons: Story = {
  render: (args: Story['args']) => ({
    components: { FdsTabs, FdsTabsItem },
    setup: () => ({ args }),
    template: `
      <FdsTabs v-bind="args">
        <FdsTabsItem label="Tab 1" as="button" />
        <FdsTabsItem label="Tab 2" as="button" active />
        <FdsTabsItem label="Tab 3" as="button" />
      </FdsTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: `
<FdsTabs>
  <FdsTabsItem label="Tab 1" as="button" />
  <FdsTabsItem label="Tab 2" as="button" active />
  <FdsTabsItem label="Tab 3" as="button" />
</FdsTabs>
        `,
      },
    },
  },
}