import type { Meta, StoryObj } from '@storybook/react'
import { Bold, Italic, Underline } from 'lucide-react'

import { Toggle } from '@/components/ui/toggle'

const meta = {
  title: 'Primitives/Toggle',
  component: Toggle,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'outline'],
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'lg'],
    },
    disabled: { control: 'boolean' },
  },
} satisfies Meta<typeof Toggle>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: <Bold className="size-4" />,
    'aria-label': 'Toggle bold',
  },
}

export const Outline: Story = {
  args: {
    variant: 'outline',
    children: <Italic className="size-4" />,
    'aria-label': 'Toggle italic',
  },
}

export const Small: Story = {
  args: {
    size: 'sm',
    children: <Bold className="size-4" />,
    'aria-label': 'Toggle bold',
  },
}

export const Large: Story = {
  args: {
    size: 'lg',
    children: <Bold className="size-4" />,
    'aria-label': 'Toggle bold',
  },
}

export const WithText: Story = {
  args: {
    children: (
      <>
        <Italic className="size-4" />
        Italic
      </>
    ),
    'aria-label': 'Toggle italic',
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
    children: <Bold className="size-4" />,
    'aria-label': 'Toggle bold',
  },
}

export const Pressed: Story = {
  args: {
    defaultPressed: true,
    children: <Bold className="size-4" />,
    'aria-label': 'Toggle bold',
  },
}

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="w-20 text-sm text-muted-foreground">default</span>
        <Toggle size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
        <Toggle size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
        <Toggle size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
      </div>
      <div className="flex items-center gap-2">
        <span className="w-20 text-sm text-muted-foreground">outline</span>
        <Toggle variant="outline" size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
        <Toggle variant="outline" size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
        <Toggle variant="outline" size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
      </div>
    </div>
  ),
}