import * as React from 'react';

import { Checkbox } from '@/components/checkbox';
import type { CheckboxProps } from '@/components/checkbox';
import { Switch } from '@/components/switch';
import type { SwitchProps } from '@/components/switch';
import { RadioGroup, RadioGroupItem } from '@/components/radio-group';
import { Label } from '@/components/label';
import { PALETTES } from './axis-values';
import type { Entry, Palette } from './types';

const SIZES = ['xs', 'sm', 'md', 'lg'] as const;

/**
 * The parent/child group — the reason the third state exists.
 *
 * Named, with an explicit `displayName`, for `chrome/lib/codegen.ts` — see the note
 * on `ControlledSortDemo` in `registry/data.tsx`.
 */
function ParentChildDemo() {
  const [items, setItems] = React.useState([true, false, false]);
  const all = items.every(Boolean);
  const some = items.some(Boolean);

  return (
    <div className="grid gap-3">
      <div className="flex items-center gap-2">
        <Checkbox
          id="pc-all"
          checked={all ? true : some ? 'indeterminate' : false}
          onCheckedChange={(next) => setItems(items.map(() => next === true))}
        />
        <Label htmlFor="pc-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={`pc-item-${index}`}
              checked={checked}
              onCheckedChange={(next) =>
                setItems(items.map((value, i) => (i === index ? next === true : value)))
              }
            />
            <Label htmlFor={`pc-item-${index}`}>Item {index + 1}</Label>
          </div>
        ))}
      </div>
    </div>
  );
}
ParentChildDemo.displayName = 'ParentChildDemo';

export const checkbox: Entry = {
  slug: 'checkbox',
  name: 'Checkbox',
  group: 'Forms',
  description:
    'A tri-state box (on / off / indeterminate). The palette colours the checked fill; the unchecked box stays neutral so a form does not read as decorated.',
  imports: { subpath: 'checkbox', names: ['Checkbox'] },
  /* CBAR folds checked, hover, invalid and disabled into one `state` axis and
     spells its resting value with a capital. The kit keeps them as separate
     props and draws the interaction states in CSS, so the axis is pinned. */
  figma: { set: 'Checkmark', pin: { state: 'Default' } },

  axes: {
    colorPalette: PALETTES,
    size: SIZES,
    checked: [true, false],
    disabled: [false, true],
  },
  defaults: { colorPalette: 'primary', size: 'md', checked: true, disabled: false },
  render: (props) => <Checkbox {...(props as CheckboxProps)} />,

  matrices: [
    {
      title: 'Size × colorPalette',
      description: 'Checked, which is the only state the palette is visible in.',
      rows: 'size',
      cols: 'colorPalette',
      pin: { checked: true },
    },
    {
      title: 'Size × state',
      rows: 'size',
      cols: 'checked',
      pin: { colorPalette: 'primary' },
    },
  ],

  compositions: [
    {
      name: 'With a label',
      description: 'Label htmlFor + Checkbox id makes the whole label a hit target.',
      render: () => (
        <div className="flex items-center gap-2">
          <Checkbox id="terms" defaultChecked />
          <Label htmlFor="terms">Accept the terms</Label>
        </div>
      ),
    },
    {
      name: 'Indeterminate',
      description: 'The parent of a partially selected group.',
      render: () => <Checkbox checked="indeterminate" />,
    },
    {
      name: 'Parent and children',
      description:
        'What that third state is for: the parent goes indeterminate when only some children are checked, rather than lying about the group in either direction.',
      render: () => <ParentChildDemo />,
    },
  ],
};

export const switchEntry: Entry = {
  slug: 'switch',
  name: 'Switch',
  group: 'Forms',
  description:
    'An immediate on/off toggle. Reach for it when the change applies at once; use a Checkbox when it applies on submit.',
  imports: { subpath: 'switch', names: ['Switch'] },
  figma: { set: 'Switch', axisMap: { Size: 'size' }, pin: { State: 'default' } },

  axes: {
    colorPalette: PALETTES,
    size: SIZES,
    checked: [true, false],
    disabled: [false, true],
  },
  defaults: { colorPalette: 'primary', size: 'md', checked: true, disabled: false },
  render: (props) => <Switch {...(props as SwitchProps)} />,

  matrices: [
    {
      title: 'Size × colorPalette',
      rows: 'size',
      cols: 'colorPalette',
      pin: { checked: true },
    },
    { title: 'Size × state', rows: 'size', cols: 'checked', pin: { colorPalette: 'primary' } },
    {
      title: 'Disabled',
      rows: 'size',
      cols: 'checked',
      pin: { colorPalette: 'primary', disabled: true },
    },
  ],

  compositions: [
    {
      name: 'With a label',
      render: () => (
        <div className="flex items-center gap-2">
          <Switch id="wifi" defaultChecked />
          <Label htmlFor="wifi">Wi-Fi</Label>
        </div>
      ),
    },
  ],
};

export const radioGroup: Entry = {
  slug: 'radio-group',
  name: 'RadioGroup',
  group: 'Forms',
  description:
    'One choice out of several. `colorPalette` and `size` live on RadioGroupItem, not on the group — the group itself is only a roving-focus container.',
  imports: { subpath: 'radio-group', names: ['RadioGroup', 'RadioGroupItem'] },
  /* CBAR draws two RadioMark sets on one page; the capture keeps both and this
     resolves to the first, whose `state` axis is the long one. */
  figma: { set: 'RadioMark', pin: { state: 'default' } },

  axes: {
    colorPalette: PALETTES,
    size: SIZES,
    disabled: [false, true],
  },
  defaults: { colorPalette: 'primary', size: 'sm', disabled: false },
  /* `value` is required on the item and must not be overwritten by the bag, so
     the axes are passed by name. */
  render: (props) => (
    <RadioGroup defaultValue="a">
      <RadioGroupItem
        value="a"
        colorPalette={props.colorPalette as Palette}
        size={props.size as 'xs' | 'sm' | 'md' | 'lg'}
        disabled={props.disabled as boolean}
      />
    </RadioGroup>
  ),

  matrices: [
    { title: 'Size × colorPalette', rows: 'size', cols: 'colorPalette' },
    {
      title: 'Disabled',
      rows: 'size',
      cols: 'colorPalette',
      pin: { disabled: true },
    },
  ],

  compositions: [
    {
      name: 'A real group',
      render: () => (
        <RadioGroup defaultValue="monthly" className="space-y-2">
          {[
            ['monthly', 'Monthly'],
            ['yearly', 'Yearly — two months free'],
            ['lifetime', 'Lifetime'],
          ].map(([value, label]) => (
            <div key={value} className="flex items-center gap-2">
              <RadioGroupItem id={value} value={value} />
              <Label htmlFor={value}>{label}</Label>
            </div>
          ))}
        </RadioGroup>
      ),
    },
    {
      name: 'With a disabled option',
      description:
        'A disabled item is skipped by the arrow keys but stays in the list, so the choice that is unavailable is still visible as a choice.',
      render: () => (
        <RadioGroup defaultValue="standard" className="space-y-2">
          {[
            ['standard', 'Standard delivery', false],
            ['express', 'Express delivery', false],
            ['same-day', 'Same day (unavailable in your area)', true],
          ].map(([value, label, disabled]) => (
            <div key={String(value)} className="flex items-center gap-2">
              <RadioGroupItem
                id={`d-${value}`}
                value={String(value)}
                disabled={disabled as boolean}
              />
              <Label htmlFor={`d-${value}`}>{label}</Label>
            </div>
          ))}
        </RadioGroup>
      ),
    },
    {
      name: 'Horizontal',
      description:
        'Layout is entirely the container’s — the group is a roving-focus wrapper and draws no direction of its own.',
      render: () => (
        <RadioGroup defaultValue="yes" className="flex gap-6">
          {[
            ['yes', 'Yes'],
            ['no', 'No'],
          ].map(([value, label]) => (
            <div key={value} className="flex items-center gap-2">
              <RadioGroupItem id={`h-${value}`} value={value} />
              <Label htmlFor={`h-${value}`}>{label}</Label>
            </div>
          ))}
        </RadioGroup>
      ),
    },
  ],
};