import type { Meta, StoryFn } from '@storybook/react'
import { SvgCog2, SvgDashboard1, SvgRocket } from '@chainlink/blocks-icons'
import { createSizeDecorator } from '../../utils/decorators'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs'

export default {
  title: 'Blocks/Tabs',
  component: Tabs,
  decorators: [createSizeDecorator('XS')],
} satisfies Meta

export const Default: StoryFn = (_args) => (
  <Tabs defaultValue="runs" className="w-[400px]">
    <TabsList>
      <TabsTrigger value="runs">Runs</TabsTrigger>
      <TabsTrigger value="deployments">Deployments</TabsTrigger>
    </TabsList>
    <TabsContent value="runs">View your runs here</TabsContent>
    <TabsContent value="deployments">View your deployments here</TabsContent>
  </Tabs>
)

export const MultipleOptions: StoryFn = (_args) => (
  <Tabs defaultValue="overview" className="w-[600px]">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="analytics">Analytics</TabsTrigger>
      <TabsTrigger value="reports">Reports</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">
      Overview content with key metrics and summaries
    </TabsContent>
    <TabsContent value="analytics">
      Analytics dashboard with charts and graphs
    </TabsContent>
    <TabsContent value="reports">
      Reports section with downloadable documents
    </TabsContent>
    <TabsContent value="settings">
      Settings panel for configuration options
    </TabsContent>
  </Tabs>
)

export const WithIcons: StoryFn = (_args) => (
  <Tabs defaultValue="overview" className="w-[600px]">
    <TabsList>
      <TabsTrigger value="overview">
        <SvgDashboard1 className="mr-2" />
        Overview
      </TabsTrigger>
      <TabsTrigger value="settings">
        <SvgCog2 className="mr-2" />
        Settings
      </TabsTrigger>
    </TabsList>
    <TabsContent value="overview">
      Overview content with key metrics and summaries
    </TabsContent>
    <TabsContent value="settings">
      Settings panel for configuration options
    </TabsContent>
  </Tabs>
)

export const WithDisabledTab: StoryFn = (_args) => (
  <Tabs defaultValue="runs" className="w-[400px]">
    <TabsList>
      <TabsTrigger value="runs">
        <SvgRocket className="mr-2" />
        Runs
      </TabsTrigger>
      <TabsTrigger value="deployments" disabled>
        Deployments
      </TabsTrigger>
    </TabsList>
    <TabsContent value="runs">View your runs here</TabsContent>
    <TabsContent value="deployments">View your deployments here</TabsContent>
  </Tabs>
)