import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from 'storybook/test';
import { Checkbox } from './checkbox';
import { Label } from '../label';
import React from 'react';

const meta: Meta<typeof Checkbox> = {
  title: 'UI/Checkbox',
  component: Checkbox,
  render: args => <Checkbox {...args} />,
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Size variant — matches the form sizing scale.',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Checkbox>;

export const Default: Story = {
  render: args => (
    <div className="items-top flex space-x-2">
      <Checkbox id="terms1" {...args} />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor="terms1">Accept terms and conditions</Label>
        <p className="text-sm text-muted-foreground">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  ),
};

export const Disabled: Story = {
  render: () => (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms2" disabled />
      <Label htmlFor="terms2">Accept terms and conditions</Label>
    </div>
  ),
};

export const Group: Story = {
  render: () => (
    <div className="grid gap-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="c1" defaultChecked />
        <Label htmlFor="c1">Notifications</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="c2" />
        <Label htmlFor="c2">Direct Messages</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="c3" />
        <Label htmlFor="c3">Profile Mentions</Label>
      </div>
    </div>
  ),
};

/**
 * Size comparison: sm, md (default), lg side-by-side.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="sm" size="sm" />
        <Label htmlFor="sm" size="sm">
          Small (sm)
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="md" size="md" />
        <Label htmlFor="md" size="md">
          Medium (md — default)
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="lg" size="lg" />
        <Label htmlFor="lg" size="lg">
          Large (lg)
        </Label>
      </div>
    </div>
  ),
};

export const Toggle: Story = {
  render: () => (
    <div className="flex items-center space-x-2">
      <Checkbox id="play-check" />
      <Label htmlFor="play-check">Accept terms</Label>
    </div>
  ),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const checkbox = canvas.getByRole('checkbox');
    await expect(checkbox).not.toBeChecked();
    await userEvent.click(checkbox);
    await expect(checkbox).toBeChecked();
    await userEvent.click(checkbox);
    await expect(checkbox).not.toBeChecked();
  },
};