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

import { Checkbox } from './checkbox'
import { expect, userEvent, screen } from 'storybook/test'

const meta = {
  title: 'Checkbox',
  component: Checkbox,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'simple', 'iconSolo'],
    },
    checkboxSize: {
      control: 'select',
      options: ['default', 'sm', 'lg'],
    },
    checkIcon: {
      control: 'select',
      options: ['default', 'check'],
    },
    iconStyle: {
      control: 'select',
      options: ['default', 'simple', 'solo'],
    },
  },
} satisfies Meta<typeof Checkbox>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { variant: 'default', checkboxSize: 'default', checkIcon: 'default', iconStyle: 'default' },
  render: (args) => <Checkbox {...args} defaultChecked={true} label="Default" id="default-cb" />,
}

export const Variants: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Checkbox defaultChecked={true} label="Default" variant="default" id="default-variant" />
      <Checkbox
        defaultChecked={true}
        label="Simple (combined with iconStyle=simple)"
        variant="simple"
        iconStyle="simple"
        id="simple-variant"
      />
      <Checkbox
        defaultChecked={true}
        label="IconSolo (combined with iconStyle=solo)"
        variant="iconSolo"
        iconStyle="solo"
        id="icon-solo-variant"
      />
    </div>
  ),
}

export const IconStyles: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Checkbox defaultChecked={true} label="Default" iconStyle="default" id="default-icon-style" />
      <Checkbox defaultChecked={true} label="Simple" iconStyle="simple" id="simple-icon-style" />
      <Checkbox defaultChecked={true} label="Solo" iconStyle="solo" />
    </div>
  ),
}

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Checkbox defaultChecked={true} label="Small" checkboxSize="sm" />
      <Checkbox defaultChecked={true} label="Default" checkboxSize="default" id="default-size" />
      <Checkbox defaultChecked={true} label="Large" checkboxSize="lg" />
    </div>
  ),
}

export const CheckIcons: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Checkbox defaultChecked={true} label="Default" checkIcon="default" id="default-icon" />
      <Checkbox defaultChecked={true} label="Check" checkIcon="check" />
    </div>
  ),
}

export const Disabled: Story = {
  args: {
    label: 'Disabled',
    disabled: true,
  },
  render: (args) => <Checkbox {...args} data-testid="disabled-checkbox" />,
  play: async () => {
    const disabledCheckbox = screen.getByTestId('disabled-checkbox')

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

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