import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Checkbox } from './checkbox';
import { Label } from '../label/label';

const meta = {
  title: 'Components/Checkbox',
  component: Checkbox,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Binary toggle for a form. Use it when the choice takes effect on save; use Switch when it applies immediately.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg'] },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
  },
} satisfies Meta<typeof Checkbox>;

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

export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
        <Checkbox key={size} size={size} defaultChecked aria-label={size} />
      ))}
    </div>
  ),
};

/** The checked fill takes whichever palette it is given. */
export const Palettes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      {(['primary', 'secondary', 'tertiary', 'black', 'red', 'green'] as const).map((palette) => (
        <Checkbox key={palette} colorPalette={palette} defaultChecked aria-label={palette} />
      ))}
    </div>
  ),
};

export const Default: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms</Label>
    </div>
  ),
};

export const States: Story = {
  render: () => (
    <div className="grid gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="unchecked" />
        <Label htmlFor="unchecked">Unchecked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checked" defaultChecked />
        <Label htmlFor="checked">Checked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="mixed" checked="indeterminate" />
        <Label htmlFor="mixed">Indeterminate</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="disabled" disabled />
        <Label htmlFor="disabled">Disabled</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="invalid" aria-invalid />
        <Label htmlFor="invalid">Invalid</Label>
      </div>
    </div>
  ),
};

/**
 * A parent checkbox is `indeterminate` when only some children are selected —
 * that third state is what stops it from lying about the group.
 */
export const ParentChild: Story = {
  render: function ParentChildStory() {
    const [items, setItems] = React.useState([true, false, false]);
    const allChecked = items.every(Boolean);
    const someChecked = items.some(Boolean);

    return (
      <div className="grid gap-3">
        <div className="flex items-center gap-2">
          <Checkbox
            id="all"
            checked={allChecked ? true : someChecked ? 'indeterminate' : false}
            onCheckedChange={(next) => setItems(items.map(() => next === true))}
          />
          <Label htmlFor="all">Select all</Label>
        </div>
        <div className="ml-6 grid gap-3">
          {items.map((checked, index) => (
            <div key={index} className="flex items-center gap-2">
              <Checkbox
                id={`item-${index}`}
                checked={checked}
                onCheckedChange={(next) =>
                  setItems(items.map((v, i) => (i === index ? next === true : v)))
                }
              />
              <Label htmlFor={`item-${index}`}>Item {index + 1}</Label>
            </div>
          ))}
        </div>
      </div>
    );
  },
};