import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect, userEvent, screen } from 'storybook/test'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'

// Create a wrapper component for Storybook that accepts our custom args
const TabsStory = (args: TabStoryArgs) => {
  return <div>Tabs Story Container</div> // Not used directly, stories use render function
}

const meta = {
  title: 'Tabs',
  component: TabsStory,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variantTabsList: {
      control: 'select',
      options: ['default', 'protocol'],
    },
    variantTabsTrigger: {
      control: 'select',
      options: ['default', 'protocol'],
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'lg'],
    },
  },
  args: {
    variantTabsList: 'default',
    variantTabsTrigger: 'default',
    size: 'default',
  },
} satisfies Meta<TabStoryArgs>

export default meta

interface TabStoryArgs {
  variantTabsList?: 'default' | 'protocol'
  variantTabsTrigger?: 'default' | 'protocol'
  size?: 'default' | 'sm' | 'lg'
}

type Story = StoryObj<TabStoryArgs>

export const Default: Story = {
  render: (args) => (
    <Tabs className="w-[400px]">
      <TabsList variant={args.variantTabsList} className="grid grid-cols-3 w-full" size={args.size}>
        <TabsTrigger variant={args.variantTabsTrigger} value="example1" className="cursor-pointer">
          Example 1
        </TabsTrigger>
        <TabsTrigger variant={args.variantTabsTrigger} value="example2" className="cursor-pointer">
          Example 2
        </TabsTrigger>
        <TabsTrigger variant={args.variantTabsTrigger} value="example3" className="cursor-pointer">
          Example 3
        </TabsTrigger>
      </TabsList>
      <TabsContent value="example1">
        <div className="p-4 rounded-lg border mt-2">Example Content 1</div>
      </TabsContent>
      <TabsContent value="example2">
        <div className="p-4 rounded-lg border mt-2">Example Content 2</div>
      </TabsContent>
      <TabsContent value="example3">
        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
      </TabsContent>
    </Tabs>
  ),
}

export const Variants: Story = {
  render: () => (
    <div className="grid grid-cols-3 mt-8 space-x-10">
      <Tabs>
        <TabsList variant="default" size="default">
          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
            default
          </TabsTrigger>
        </TabsList>
        <TabsContent value="small">
          <div className="p-4 rounded-lg border mt-2">Content</div>
        </TabsContent>
      </Tabs>
      <Tabs>
        <TabsList variant="protocol" size="default">
          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
            TabsList protocol
          </TabsTrigger>
        </TabsList>
        <TabsContent value="default">
          <div className="p-4 rounded-lg border mt-2">Content</div>
        </TabsContent>
      </Tabs>
      <Tabs>
        <TabsList variant="protocol" size="default">
          <TabsTrigger variant="protocol" value="large" className="cursor-pointer w-[100px]">
            TabsList & -Trigger protocol
          </TabsTrigger>
        </TabsList>
        <TabsContent value="large">
          <div className="p-4 rounded-lg border mt-2">Content</div>
        </TabsContent>
      </Tabs>
    </div>
  ),
}

export const Sizes: Story = {
  render: () => (
    <div className="grid grid-cols-3 mt-8">
      <Tabs>
        <TabsList variant="default" size="sm">
          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
            sm
          </TabsTrigger>
        </TabsList>
        <TabsContent value="small">
          <div className="p-4 rounded-lg border mt-2">Small Size Content</div>
        </TabsContent>
      </Tabs>
      <Tabs>
        <TabsList variant="default" size="default">
          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
            default
          </TabsTrigger>
        </TabsList>
        <TabsContent value="default">
          <div className="p-4 rounded-lg border mt-2">Default Size Content</div>
        </TabsContent>
      </Tabs>
      <Tabs>
        <TabsList variant="default" size="lg">
          <TabsTrigger variant="default" value="large" className="cursor-pointer w-[100px]">
            lg
          </TabsTrigger>
        </TabsList>
        <TabsContent value="large">
          <div className="p-4 rounded-lg border mt-2">Large Size Content</div>
        </TabsContent>
      </Tabs>
    </div>
  ),
}

export const Disabled: Story = {
  render: () => (
    <Tabs defaultValue="tab1" className="w-[400px]">
      <TabsList className="grid grid-cols-2 w-full">
        <TabsTrigger value="tab1" className="cursor-pointer">
          Available
        </TabsTrigger>
        <TabsTrigger value="tab2" className="cursor-pointer" disabled>
          Disabled
        </TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        <div className="p-4 rounded-lg border border mt-2">This tab is available.</div>
      </TabsContent>
      <TabsContent value="tab2">
        <div className="p-4 rounded-lg border border mt-2">This content won't be accessible.</div>
      </TabsContent>
    </Tabs>
  ),
}

export const InteractiveTest: Story = {
  render: () => (
    <Tabs defaultValue="example1" className="w-[400px]">
      <TabsList variant="default" className="grid grid-cols-3 w-full">
        <TabsTrigger value="example1" className="cursor-pointer" data-testid="tab-example1">
          Example 1
        </TabsTrigger>
        <TabsTrigger value="example2" className="cursor-pointer" data-testid="tab-example2">
          Example 2
        </TabsTrigger>
        <TabsTrigger value="example3" className="cursor-pointer">
          Example 3
        </TabsTrigger>
      </TabsList>
      <TabsContent value="example1">
        <div className="p-4 rounded-lg border mt-2" data-testid="example1-content">
          Example Content 1
        </div>
      </TabsContent>
      <TabsContent value="example2">
        <div className="p-4 rounded-lg border mt-2" data-testid="example2-content">
          Example Content 2
        </div>
      </TabsContent>
      <TabsContent value="example3">
        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
      </TabsContent>
    </Tabs>
  ),
  play: async () => {
    const example1Tab = screen.getByTestId('tab-example1')
    const accountContent = screen.getByTestId('example1-content')
    const example2Tab = screen.getByTestId('tab-example2')

    await expect(example1Tab).toHaveAttribute('data-state', 'active')
    await expect(accountContent).toBeVisible()

    await userEvent.click(example2Tab)

    await expect(example2Tab).toHaveAttribute('data-state', 'active')
    await expect(example1Tab).toHaveAttribute('data-state', 'inactive')

    const passwordContent = screen.getByTestId('example2-content')
    await expect(passwordContent).toBeVisible()
  },
}
