import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect, userEvent, screen } from 'storybook/test'

import { RadioGroup, RadioGroupItem } from './radio-group'
import { Label } from '@components/ui/label/label'

const items = [
  { value: 'item-1', label: 'Item 1' },
  { value: 'item-2', label: 'Item 2' },
  { value: 'item-3', label: 'Item 3' },
]

const circleVariants = ['default', 'grayThick'] as const
const sizes = ['default', 'sm'] as const

const meta = {
  title: 'RadioGroup',
  component: RadioGroupItem,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    value: {
      table: { disable: true },
    },
    circleVariant: {
      control: 'select',
      options: circleVariants,
    },
    size: {
      control: 'select',
      options: sizes,
    },
    defaultValue: {
      control: 'select',
      options: items.map((i) => i.value),
    },
  },
} satisfies Meta<typeof RadioGroupItem>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    value: '',
    circleVariant: 'default',
    size: 'default',
    defaultValue: 'item-1',
  },
  render: (args) => (
    <div className="w-[200px]">
      <RadioGroup defaultValue={String(args.defaultValue)}>
        {items.map(({ value, label }) => (
          <div key={value} className="flex items-center gap-2">
            <RadioGroupItem
              value={value}
              id={value}
              circleVariant={args.circleVariant}
              size={args.size}
              className="cursor-pointer"
            />
            <Label htmlFor={value} className="cursor-pointer">
              {label}
            </Label>
          </div>
        ))}
      </RadioGroup>
    </div>
  ),
  play: async () => {
    // Check that the default radio is checked
    const radio1 = screen.getByLabelText('Item 1')
    const radio2 = screen.getByLabelText('Item 2')
    await expect(radio1).toBeChecked()
    await expect(radio2).not.toBeChecked()
    // Click the label for Item 2
    await userEvent.click(screen.getByLabelText('Item 2'))
    await expect(radio2).toBeChecked()
    await expect(radio1).not.toBeChecked()
  },
}

const itemsVariants = [
  { value: 'item-1', label: 'Item 1' },
  { value: 'item-2', label: 'Item 2' },
]

export const CircleVariants: Story = {
  args: {
    value: '',
    circleVariant: 'default',
    size: 'default',
    defaultValue: '',
  },
  render: () => (
    <div className="flex gap-6">
      {circleVariants.map((variant) => (
        <div key={variant} className="flex items-center gap-2">
          <RadioGroup defaultValue="item-2">
            {itemsVariants.map(({ value, label }) => (
              <div key={value} className="flex items-center gap-2">
                <RadioGroupItem
                  value={value}
                  id={`variants-${variant}-${value}`}
                  circleVariant={variant}
                  size="default"
                  className="cursor-pointer"
                />
                <Label htmlFor={`variants-${variant}-${value}`} className="cursor-pointer">
                  {variant}
                </Label>
              </div>
            ))}
          </RadioGroup>
        </div>
      ))}
    </div>
  ),
}

export const Sizes: Story = {
  args: {
    value: '',
    circleVariant: 'default',
    size: 'default',
    defaultValue: '',
  },
  render: () => (
    <div className="flex flex-col gap-2">
      {sizes.map((size) => (
        <div key={size} className="flex items-center gap-2 justify-center">
          <RadioGroup defaultValue="item-2" className="flex flex-row">
            {itemsVariants.map(({ value, label }) => (
              <div key={value} className="flex items-center gap-2">
                <RadioGroupItem
                  value={value}
                  id={`sizes-${size}-${value}`}
                  circleVariant="default"
                  size={size}
                  className="cursor-pointer"
                />
                <Label htmlFor={`sizes-${size}-${value}`} className="cursor-pointer">
                  {size}
                </Label>
              </div>
            ))}
          </RadioGroup>
        </div>
      ))}
    </div>
  ),
}
