Checkbox

import { useEffect, useLayoutEffect, useRef } from 'react';
import type { ChangeEvent, KeyboardEvent, PointerEvent } from 'react';
import { SPRING, Spring, createLoop, onReducedMotionChange, prefersReducedMotion } from '../shared/spring';
import { resolveAccent, type Accent } from '../shared/accent';
import { useControllable } from '../actions-kit/kit';
import '../shared/ember.css';
import './checkbox.css';

export interface CheckboxProps {
  checked?: boolean;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
  /** Shown as a dash; reported to assistive tech as mixed. */
  indeterminate?: boolean;
  label?: string;
  'aria-label'?: string;
  disabled?: boolean;
  accent?: Accent;
  className?: string;
}

const PRESS_SCALE = 0.92;

export function Checkbox({
  checked,
  defaultChecked = false,
  onChange,
  indeterminate = false,
  label,
  'aria-label': ariaLabel,
  disabled = false,
  accent: accentProp,
  className,
}: CheckboxProps) {
  const accent = resolveAccent(accentProp);
  const [on, setOn] = useControllable(checked, defaultChecked, onChange);
  const state = indeterminate ? 'mixed' : on ? 'on' : 'off';

  const inputRef = useRef<HTMLInputElement>(null);
  const boxRef = useRef<HTMLSpanElement>(null);

  const sim = useRef({
    scale: new Spring(1, SPRING.loose),
    reduced: false,
    pointer: -1,
  });
  const loopRef = useRef<ReturnType<typeof createLoop> | null>(null);

  const apply = () => {
    const box = boxRef.current;
    if (!box) return;
    const v = sim.current.scale.value;
    box.style.transform = Math.abs(v - 1) < 0.0005 ? '' : `scale(${v.toFixed(4)})`;
  };

  useEffect(() => {
    const s = sim.current;
    s.reduced = prefersReducedMotion();
    const loop = createLoop((dt) => {
      const moving = s.scale.step(dt);
      apply();
      return moving;
    });
    loopRef.current = loop;
    const unsub = onReducedMotionChange((r) => {
      s.reduced = r;
      if (r) {
        s.scale.set(1);
        apply();
      }
    });
    return () => {
      loop.stop();
      unsub();
    };
  }, []);

  useLayoutEffect(() => {
    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
  }, [indeterminate]);

  /* ---------------------------------------------------------------- press */

  const press = () => {
    const s = sim.current;
    if (s.reduced) return;
    s.scale.config = SPRING.snappy;
    s.scale.target = PRESS_SCALE;
    loopRef.current?.wake();
  };
  const release = () => {
    const s = sim.current;
    s.pointer = -1;
    s.scale.config = SPRING.loose;
    s.scale.target = 1;
    if (s.reduced) s.scale.set(1);
    loopRef.current?.wake();
  };

  const onPointerDown = (e: PointerEvent<HTMLLabelElement>) => {
    if (disabled || e.button !== 0) return;
    sim.current.pointer = e.pointerId;
    press();
  };
  const onPointerEnd = (e: PointerEvent<HTMLLabelElement>) => {
    if (sim.current.pointer === e.pointerId) release();
  };
  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === ' ' && !e.repeat) press();
  };
  const onKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === ' ') release();
  };

  const onInput = (e: ChangeEvent<HTMLInputElement>) => {
    // From mixed, a click always checks.
    setOn(indeterminate ? true : e.currentTarget.checked);
  };

  return (
    <label
      className={`ember em-check${disabled ? ' is-disabled' : ''}${className ? ` ${className}` : ''}`}
      data-accent={accent}
      data-state={state}
      onPointerDown={onPointerDown}
      onPointerUp={onPointerEnd}
      onPointerCancel={onPointerEnd}
      onPointerLeave={onPointerEnd}
    >
      <span ref={boxRef} className="em-check__box">
        <input
          ref={inputRef}
          type="checkbox"
          className="em-check__input"
          checked={on && !indeterminate}
          disabled={disabled}
          aria-label={label ? undefined : ariaLabel}
          onChange={onInput}
          onKeyDown={onKeyDown}
          onKeyUp={onKeyUp}
          onBlur={release}
        />
        <svg className="em-check__mark" viewBox="0 0 16 16" aria-hidden="true">
          <path className="em-check__tick" d="M4.25 8.25 6.75 10.75 11.75 5.25" pathLength={1} />
          <path className="em-check__dash" d="M4.5 8h7" />
        </svg>
      </span>
      {label ? <span className="em-check__label">{label}</span> : null}
    </label>
  );
}

export default Checkbox;