import type { Meta, StoryObj } from '@storybook/react-vite'

import { Checkbox } from './shadcn-checkbox'
import { expect, userEvent, screen } from 'storybook/test'
import { Label } from '@components/ui/label/label'

const meta = {
  title: 'ShadcnCheckbox',
  component: Checkbox,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default'],
    },
    size: {
      control: 'select',
      options: ['default', 'sm'],
    },
  },
} satisfies Meta<typeof Checkbox>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { variant: 'default', size: 'default' },
  render: (args) => (
    <div className="flex flex-wrap gap-2">
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="default-cb" {...args} />
        <Label htmlFor="default-cb">Default</Label>
      </div>
    </div>
  ),
}

export const Variants: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="default-variant" variant="default" defaultChecked={true} />
        <Label htmlFor="default-variant">Default</Label>
      </div>
    </div>
  ),
}

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="sm" size="sm" />
        <Label htmlFor="sm">sm</Label>
      </div>
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="default-size" size="default" />
        <Label htmlFor="default-size">Default</Label>
      </div>
    </div>
  ),
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => (
    <div className="flex flex-wrap gap-2">
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="disabled" {...args} data-testid="disabled-checkbox" defaultChecked={false} />
        <Label htmlFor="disabled">Disabled</Label>
      </div>
      <div className="flex flex-wrap gap-2 items-center">
        <Checkbox id="disabled" {...args} data-testid="disabled-checkbox-active" defaultChecked={true} />
        <Label htmlFor="disabled">Disabled active</Label>
      </div>
    </div>
  ),
  play: async () => {
    const disabledCheckbox = screen.getByTestId('disabled-checkbox')

    await expect(disabledCheckbox).toHaveAttribute('disabled')

    await userEvent.click(disabledCheckbox, { pointerEventsCheck: 0 })
  },
}
