import type { Meta, StoryFn } from '@storybook/react'
import { createSizeDecorator } from '../../utils/decorators'
import {
  NavTabs,
  NavTabsContent,
  NavTabsList,
  NavTabsTitle,
  NavTabsTrigger,
} from './NavTabs'

export default {
  title: 'Navigation/NavTabs/Primitives',
  component: NavTabs,
  decorators: [createSizeDecorator('XS')],
} satisfies Meta

export const Default: StoryFn = (args) => (
  <NavTabs {...args} defaultValue="runs">
    <NavTabsList>
      <NavTabsTrigger value="runs">Runs</NavTabsTrigger>
      <NavTabsTrigger value="deployments">Deployments</NavTabsTrigger>
    </NavTabsList>
    <NavTabsContent value="runs">View your runs here</NavTabsContent>
    <NavTabsContent value="deployments">
      View your deployments here
    </NavTabsContent>
  </NavTabs>
)

export const WithTitle: StoryFn = (args) => (
  <NavTabs {...args} defaultValue="overview">
    <NavTabsList>
      <NavTabsTitle>Dashboard</NavTabsTitle>
      <NavTabsTrigger value="overview">Overview</NavTabsTrigger>
      <NavTabsTrigger value="analytics">Analytics</NavTabsTrigger>
      <NavTabsTrigger value="reports">Reports</NavTabsTrigger>
    </NavTabsList>
    <NavTabsContent value="overview">
      Dashboard overview with key metrics and summaries
    </NavTabsContent>
    <NavTabsContent value="analytics">
      Analytics dashboard with charts and graphs
    </NavTabsContent>
    <NavTabsContent value="reports">
      Reports section with downloadable documents
    </NavTabsContent>
  </NavTabs>
)

export const MultipleOptions: StoryFn = (args) => (
  <NavTabs {...args} defaultValue="overview">
    <NavTabsList>
      <NavTabsTrigger value="overview">Overview</NavTabsTrigger>
      <NavTabsTrigger value="analytics">Analytics</NavTabsTrigger>
      <NavTabsTrigger value="reports">Reports</NavTabsTrigger>
      <NavTabsTrigger value="settings">Settings</NavTabsTrigger>
    </NavTabsList>
    <NavTabsContent value="overview">
      Overview content with key metrics and summaries
    </NavTabsContent>
    <NavTabsContent value="analytics">
      Analytics dashboard with charts and graphs
    </NavTabsContent>
    <NavTabsContent value="reports">
      Reports section with downloadable documents
    </NavTabsContent>
    <NavTabsContent value="settings">
      Settings panel for configuration options
    </NavTabsContent>
  </NavTabs>
)

export const WithIcons: StoryFn = (args) => (
  <NavTabs {...args} defaultValue="overview">
    <NavTabsList>
      <NavTabsTrigger value="overview">Overview</NavTabsTrigger>
      <NavTabsTrigger value="analytics">Analytics</NavTabsTrigger>
      <NavTabsTrigger value="reports">Reports</NavTabsTrigger>
      <NavTabsTrigger value="settings">Settings</NavTabsTrigger>
    </NavTabsList>
    <NavTabsContent value="overview">
      Overview content with key metrics and summaries
    </NavTabsContent>
    <NavTabsContent value="analytics">
      Analytics dashboard with charts and graphs
    </NavTabsContent>
    <NavTabsContent value="reports">
      Reports section with downloadable documents
    </NavTabsContent>
    <NavTabsContent value="settings">
      Settings panel for configuration options
    </NavTabsContent>
  </NavTabs>
)

export const WithDisabledTab: StoryFn = (args) => (
  <NavTabs {...args} defaultValue="runs">
    <NavTabsList>
      <NavTabsTrigger value="runs">Runs</NavTabsTrigger>
      <NavTabsTrigger value="deployments" disabled>
        Deployments
      </NavTabsTrigger>
    </NavTabsList>
    <NavTabsContent value="runs">View your runs here</NavTabsContent>
    <NavTabsContent value="deployments">
      View your deployments here
    </NavTabsContent>
  </NavTabs>
)