import type { Meta, StoryFn } from '@storybook/react'
import { createSizeDecorator } from '../../utils/decorators'
import { Typography } from '../Typography'
import { HeaderNavTabs } from './HeaderNavTabs'

export default {
  title: 'Navigation/NavTabs/HeaderNavTabs',
  component: HeaderNavTabs,
  decorators: [createSizeDecorator('XS')],
  argTypes: {
    path: {
      description:
        'Current pathname (e.g., from useRouter().asPath or useLocation().pathname)',
      control: 'text',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '"/"' },
      },
    },
    links: {
      description: 'Array of navigation links with href and name properties',
      control: 'object',
      table: {
        type: { summary: 'NavigationLink[]' },
      },
    },
    renderLink: {
      description:
        'Custom link component renderer. Defaults to a regular anchor tag.',
      control: false,
      table: {
        type: {
          summary:
            '(props: { href: string; children: React.ReactNode }) => React.ReactNode',
        },
      },
    },
    className: {
      description: 'Additional className for the NavTabs root',
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
  },
  args: {
    path: '/feeds',
    links: [
      { href: '/', name: 'Home' },
      { href: '/feeds', name: 'Feeds' },
      { href: '/streams', name: 'Streams' },
    ],
    indicatorOffset: undefined,
    className: '',
  },
} satisfies Meta<typeof HeaderNavTabs>

export const Default: StoryFn<typeof HeaderNavTabs> = (args) => (
  <section className="flex h-[74px] w-full items-center px-4 py-10">
    <HeaderNavTabs {...args} />
  </section>
)

export const WithCustomLinks: StoryFn = (args) => (
  <section className="flex h-[74px] w-full items-center px-4 py-10">
    <HeaderNavTabs
      {...args}
      path="/analytics"
      links={[
        { href: '/', name: 'Dashboard' },
        { href: '/analytics', name: 'Analytics' },
        { href: '/reports', name: 'Reports' },
        { href: '/settings', name: 'Settings' },
      ]}
    />
  </section>
)

export const WithTypographyRenderLink: StoryFn = (args) => (
  <section className="flex h-[74px] w-full items-center px-4 py-10">
    <HeaderNavTabs
      {...args}
      path="/streams"
      links={[
        { href: '/', name: 'Home' },
        { href: '/feeds', name: 'Feeds' },
        { href: '/streams', name: 'Streams' },
      ]}
      renderLink={({ href, children, ...props }) => (
        <Typography variant="body-semi-l" color="link" asChild>
          <a href={href} {...props}>
            {children}
          </a>
        </Typography>
      )}
    />
  </section>
)

export const DifferentPaths: StoryFn = (args) => (
  <div className="space-y-8">
    <div>
      <Typography variant="body-s" color="muted" className="mb-10">
        Path: /
      </Typography>
      <section className="flex h-[74px] w-full items-center px-4 py-10">
        <HeaderNavTabs {...args} path="/" links={args.links} />
      </section>
    </div>
    <div>
      <Typography variant="body-s" color="muted" className="mb-10">
        Path: /feeds
      </Typography>
      <section className="flex h-[74px] w-full items-center px-4 py-10">
        <HeaderNavTabs {...args} path="/feeds" links={args.links} />
      </section>
    </div>
    <div>
      <Typography variant="body-s" color="muted" className="mb-10">
        Path: /feeds/ethereum
      </Typography>
      <section className="flex h-[74px] w-full items-center px-4 py-10">
        <HeaderNavTabs {...args} path="/feeds/ethereum" links={args.links} />
      </section>
    </div>
    <div>
      <Typography variant="body-s" color="muted" className="mb-10">
        Path: /streams
      </Typography>
      <section className="flex h-[74px] w-full items-center px-4 py-10">
        <HeaderNavTabs {...args} path="/streams" links={args.links} />
      </section>
    </div>
    <div>
      <Typography variant="body-s" color="muted" className="mb-10">
        Path: /streams/bitcoin
      </Typography>
      <section className="flex h-[74px] w-full items-center px-4 py-10">
        <HeaderNavTabs {...args} path="/streams/bitcoin" links={args.links} />
      </section>
    </div>
  </div>
)