import clsx from "clsx";
import type { InputHTMLAttributes, ReactNode, Ref } from "react";

// A6 (docs/DESIGN.md): checkbox, slider and colour well are the BROWSER's controls, tinted
// with the accent — keyboard, screen reader and forced-colours support come free, and a drawn copy
// would have to rebuild all three. What the browser does not give is the 44 touch target: the labelled
// row (`CheckRow`) or the slider's own box grows to it on a coarse pointer. Like `Input`, a raw
// `<input>` for any of them anywhere else is a lint error.

type Native = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange">;

/** The bare checkbox: inside your own `<label>`, or with an `aria-label`. Prefer `CheckRow`. */
export function Checkbox({
  onChange,
  className,
  ref,
  ...rest
}: Native & { onChange?: (checked: boolean) => void; ref?: Ref<HTMLInputElement> }) {
  return (
    <input
      ref={ref}
      type="checkbox"
      onChange={(e) => onChange?.(e.target.checked)}
      className={clsx(
        "size-4 shrink-0 cursor-pointer accent-accent disabled:cursor-not-allowed",
        className,
      )}
      {...rest}
    />
  );
}

/** A checkbox and its label as one row, the whole row the target (44 on touch). */
export function CheckRow({
  checked,
  onChange,
  disabled,
  className,
  children,
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  /** Lays the row out (text size, colour, margin); the target geometry is the primitive's. */
  className?: string;
  children: ReactNode;
}) {
  return (
    <label
      className={clsx(
        "inline-flex min-h-6 cursor-pointer items-center gap-2 select-none pointer-coarse:min-h-(--touch-target)",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
    >
      <Checkbox checked={checked} onChange={onChange} disabled={disabled} />
      {children}
    </label>
  );
}

/** A range slider; `onChange` hands back the number. */
export function Slider({
  onChange,
  className,
  ...rest
}: Native & { onChange: (value: number) => void }) {
  return (
    <input
      type="range"
      onChange={(e) => onChange(Number(e.target.value))}
      className={clsx(
        "min-h-6 w-full cursor-pointer accent-accent pointer-coarse:min-h-(--touch-target)",
        className,
      )}
      {...rest}
    />
  );
}

/** The browser's colour well, a small swatch. */
export function ColorInput({
  onChange,
  className,
  ...rest
}: Native & { onChange: (value: string) => void }) {
  return (
    <input
      type="color"
      onChange={(e) => onChange(e.target.value)}
      className={clsx(
        "h-6 w-10 cursor-pointer rounded-sm bg-transparent pointer-coarse:h-(--touch-target) pointer-coarse:w-14",
        className,
      )}
      {...rest}
    />
  );
}