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

import { Label } from './label'
import { Checkbox } from '@components/ui/checkbox/shadcn-checkbox'

const meta = {
  title: 'Label',
  component: Label,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof Label>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => <Label>Label</Label>,
}

export const Usage: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2 items-center">
      <Checkbox id="label-1" />
      <Label htmlFor="label-1" className="cursor-pointer">
        Label for usage demonstration (click label to toggle checkbox)
      </Label>
    </div>
  ),
  play: async () => {
    const label = screen.getByText(/Label for usage demonstration/)
    const checkbox = screen.getByRole('checkbox')
    await expect(checkbox).not.toBeChecked()
    await userEvent.click(label)
    await expect(checkbox).toBeChecked()
    await userEvent.click(label)
    await expect(checkbox).not.toBeChecked()
  },
}
