Quantity

"use client";

import { useId, useState, type ComponentProps, type KeyboardEvent } from "react";
import "./quantity.css";

export type QuantityProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children" | "role"> & {
  /** Names the spinbutton, such as "Quantity, Linen shirt". */
  label: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  /** When given, the minus button becomes a remove button at the minimum. */
  onRemove?: () => void;
  /** Said and shown when the value reaches max, such as "Only 5 left". */
  maxMessage?: string;
  size?: "s" | "m";
  disabled?: boolean;
};

const iconProps = {
  viewBox: "0 0 16 16",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.5,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  "aria-hidden": true,
} as const;

export function Quantity({
  label,
  value,
  defaultValue,
  onValueChange,
  min = 1,
  max,
  onRemove,
  maxMessage,
  size = "m",
  disabled = false,
  className,
  ...rest
}: QuantityProps) {
  const messageId = useId();
  const [inner, setInner] = useState(defaultValue ?? min);
  const [draft, setDraft] = useState<string | null>(null);
  /* Each change flips the parity so the roll animation restarts without remounting the input. */
  const [roll, setRoll] = useState<{ n: number; dir: "up" | "down" } | null>(null);
  const current = value ?? inner;
  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min, n));
  const atMin = current <= min;
  const atMax = max !== undefined && current >= max;
  const removes = atMin && onRemove !== undefined;

  const set = (next: number) => {
    const n = clamp(next);
    setDraft(null);
    if (n === current) return;
    setRoll((r) => ({ n: (r?.n ?? 0) + 1, dir: n > current ? "up" : "down" }));
    if (value === undefined) setInner(n);
    onValueChange?.(n);
  };

  const commit = () => {
    if (draft === null) return;
    const n = Number.parseInt(draft, 10);
    if (Number.isNaN(n)) setDraft(null);
    else set(n);
  };

  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    const editing = draft !== null;
    const keys: Record<string, (() => void) | false> = {
      ArrowUp: () => set(current + 1),
      ArrowDown: () => set(current - 1),
      Home: () => set(min),
      End: max !== undefined && (() => set(max)),
      /* Only while typing, so Escape still closes a surrounding dialog and Enter still submits. */
      Enter: editing && commit,
      Escape: editing && (() => setDraft(null)),
    };
    const run = keys[event.key];
    if (!run) return;
    event.preventDefault();
    run();
  };

  return (
    <div
      {...rest}
      className={["eq-quantity", className].filter(Boolean).join(" ")}
      role="group"
      aria-label={label}
      data-size={size}
      data-disabled={disabled || undefined}
    >
      <div className="eq-quantity-control">
        {removes ? (
          <button
            type="button"
            className="eq-quantity-button"
            data-action="remove"
            aria-label="Remove"
            disabled={disabled}
            onClick={(event) => {
              /* The bin takes minus's place, so ignore the second click of a double-click. */
              if (event.detail < 2) onRemove?.();
            }}
            onKeyDown={(event) => {
              if (event.repeat) event.preventDefault();
            }}
          >
            <svg {...iconProps}>
              <path d="M2.75 4.25h10.5M6.25 4.25v-1.5h3.5v1.5M4.25 4.25l.6 8.4a1 1 0 0 0 1 .85h4.3a1 1 0 0 0 1-.85l.6-8.4M6.75 7v4M9.25 7v4" />
            </svg>
          </button>
        ) : (
          <button
            type="button"
            className="eq-quantity-button"
            data-action="decrease"
            aria-label="Decrease"
            aria-disabled={atMin || undefined}
            disabled={disabled}
            onClick={() => set(current - 1)}
          >
            <svg {...iconProps}>
              <path d="M3.75 8h8.5" />
            </svg>
          </button>
        )}
        <input
          className="eq-quantity-input"
          type="text"
          inputMode="numeric"
          role="spinbutton"
          aria-label={label}
          aria-valuenow={current}
          aria-valuemin={min}
          aria-valuemax={max}
          aria-describedby={messageId}
          autoComplete="off"
          disabled={disabled}
          value={draft ?? String(current)}
          data-roll={roll ? (roll.n % 2 ? "a" : "b") : undefined}
          data-dir={roll?.dir}
          onChange={(event) => setDraft(event.target.value.replace(/\D/g, ""))}
          onBlur={commit}
          onKeyDown={onKeyDown}
          onFocus={(event) => event.target.select()}
        />
        <button
          type="button"
          className="eq-quantity-button"
          data-action="increase"
          aria-label="Increase"
          aria-disabled={atMax || undefined}
          disabled={disabled}
          onClick={() => set(current + 1)}
        >
          <svg {...iconProps}>
            <path d="M3.75 8h8.5M8 3.75v8.5" />
          </svg>
        </button>
      </div>
      <p className="eq-quantity-message" id={messageId} aria-live="polite">
        {atMax ? (maxMessage ?? `Maximum is ${max}`) : ""}
      </p>
    </div>
  );
}