Money field

"use client";

import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps, FocusEvent, KeyboardEvent, ReactNode } from "react";
import "./money-field.css";

export type MoneyFieldProps = Omit<
  ComponentProps<"input">,
  "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "name" | "children"
> & {
  label: ReactNode;
  /** Amount in major units (12.5 is twelve dollars fifty). null is empty. */
  value?: number | null;
  defaultValue?: number | null;
  onValueChange?: (value: number | null) => void;
  /** ISO 4217 code. */
  currency?: string;
  locale?: string;
  /** When given, the currency becomes a small native select inside the control. */
  currencies?: string[];
  onCurrencyChange?: (currency: string) => void;
  min?: number;
  max?: number;
  /** Submits a hidden input holding a plain decimal string, such as 12480.50. */
  name?: string;
  hint?: ReactNode;
  error?: ReactNode;
};

type Shape = {
  digits: number;
  decimal: string;
  group: string;
  symbol: string;
  symbolFirst: boolean;
  grouper: Intl.NumberFormat;
};

function shapeOf(locale: string, currency: string): Shape {
  const money = new Intl.NumberFormat(locale, { style: "currency", currency, numberingSystem: "latn" });
  const parts = money.formatToParts(1234567.5);
  const find = (type: string) => parts.find((p) => p.type === type)?.value ?? "";
  const symbolAt = parts.findIndex((p) => p.type === "currency");
  const intAt = parts.findIndex((p) => p.type === "integer");
  return {
    digits: money.resolvedOptions().maximumFractionDigits ?? 2,
    decimal: new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal")?.value ?? ".",
    group: find("group"),
    symbol: find("currency"),
    symbolFirst: symbolAt < intAt,
    grouper: new Intl.NumberFormat(locale, { maximumFractionDigits: 0, numberingSystem: "latn" }),
  };
}

/** Plain draft ("12480.5") into display text ("12,480.5"), keeping a trailing separator. */
function display(plain: string, shape: Shape) {
  if (plain === "") return "";
  const [whole, fraction] = plain.split(".");
  const digits = whole.replace(/^0+(?=\d)/, "");
  const grouped = digits === "" ? "" : shape.grouper.format(BigInt(digits));
  return fraction === undefined ? grouped : `${grouped}${shape.decimal}${fraction}`;
}

/** Display text into a plain draft, keeping only digits and the first decimal separator. */
function plainOf(text: string, shape: Shape) {
  let out = "";
  let seen = false;
  for (const char of text) {
    if (char >= "0" && char <= "9") out += char;
    else if (char === shape.decimal && shape.digits > 0 && !seen) {
      out += ".";
      seen = true;
    }
  }
  const [whole, fraction] = out.split(".");
  return fraction === undefined ? whole : `${whole}.${fraction.slice(0, shape.digits)}`;
}

const numberOf = (plain: string) => (plain === "" || plain === "." ? null : Number(plain));
const padded = (n: number | null, shape: Shape) => (n === null ? "" : n.toFixed(shape.digits));
const significant = (char: string, shape: Shape) => (char >= "0" && char <= "9") || char === shape.decimal;

export function MoneyField({
  label,
  value,
  defaultValue = null,
  onValueChange,
  currency = "USD",
  locale = "en-US",
  currencies,
  onCurrencyChange,
  min,
  max,
  name,
  hint,
  error,
  disabled,
  className,
  style,
  id,
  onBlur,
  onKeyDown,
  ...rest
}: MoneyFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const inputRef = useRef<HTMLInputElement>(null);
  const caret = useRef<number | null>(null);
  // Forces a render when a keystroke is rejected, so the caret is still put back.
  const [, bump] = useState(0);

  const [code, setCode] = useState(currency);
  const shape = useMemo(() => shapeOf(locale, code), [locale, code]);
  const [plain, setPlain] = useState(() => padded(value !== undefined ? value : defaultValue, shape));

  const [seenCurrency, setSeenCurrency] = useState(currency);
  if (currency !== seenCurrency) {
    setSeenCurrency(currency);
    setCode(currency);
    const n = numberOf(plain);
    if (n !== null) setPlain(n.toFixed(shapeOf(locale, currency).digits));
  }
  const [seenValue, setSeenValue] = useState(value);
  if (value !== seenValue) {
    setSeenValue(value);
    if (value !== undefined && value !== numberOf(plain)) setPlain(padded(value, shape));
  }
  const amount = numberOf(plain);

  useLayoutEffect(() => {
    const input = inputRef.current;
    if (caret.current === null || !input) return;
    input.setSelectionRange(caret.current, caret.current);
    caret.current = null;
  });

  function update(next: string, count?: number) {
    setPlain(next);
    const n = numberOf(next);
    if (n !== amount) onValueChange?.(n);
    if (count === undefined) return;
    // Put the caret back after the same number of digits it followed before formatting.
    const text = display(next, shape);
    let seen = 0;
    let at = 0;
    while (at < text.length && seen < count) {
      if (significant(text[at], shape)) seen += 1;
      at += 1;
    }
    caret.current = at;
  }

  function clamp(n: number) {
    return Math.min(max ?? Infinity, Math.max(min ?? 0, n));
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const input = event.currentTarget;
    const before = input.value.slice(0, input.selectionStart ?? input.value.length);
    const count = plainOf(before, shape).length;
    update(plainOf(input.value, shape), count);
    bump((n) => n + 1);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const input = event.currentTarget;
    const start = input.selectionStart ?? 0;
    const end = input.selectionEnd ?? 0;
    // Deleting a group separator would be undone by formatting, so step over it and delete the digit.
    if (start === end && shape.group) {
      if (event.key === "Backspace" && input.value[start - 1] === shape.group) input.setSelectionRange(start - 1, start - 1);
      if (event.key === "Delete" && input.value[start] === shape.group) input.setSelectionRange(start + 1, start + 1);
    }
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      event.preventDefault();
      const by = (event.shiftKey ? 10 : 1) * (event.key === "ArrowUp" ? 1 : -1);
      const next = padded(clamp((amount ?? 0) + by), shape);
      update(next, plainOf(display(next, shape), shape).length);
    }
  }

  function handleBlur(event: FocusEvent<HTMLInputElement>) {
    onBlur?.(event);
    if (amount !== null) update(padded(clamp(amount), shape));
  }

  function handleCurrency(event: ChangeEvent<HTMLSelectElement>) {
    const next = event.currentTarget.value;
    setCode(next);
    onCurrencyChange?.(next);
    if (amount !== null) {
      const digits = shapeOf(locale, next).digits;
      const rounded = Number(amount.toFixed(digits));
      setPlain(rounded.toFixed(digits));
      if (rounded !== amount) onValueChange?.(rounded);
    }
  }

  const hintId = hint ? `${inputId}-hint` : undefined;
  const errorId = error ? `${inputId}-error` : undefined;
  const symbol = (
    <span className="eq-money-field-symbol" aria-hidden="true">
      {shape.symbol}
    </span>
  );

  return (
    <div
      className={["eq-money-field", className].filter(Boolean).join(" ")}
      style={style}
      data-disabled={disabled || undefined}
    >
      <label className="eq-money-field-label" htmlFor={inputId}>
        {label}
      </label>
      <div className="eq-money-field-control" data-invalid={error ? true : undefined}>
        {shape.symbolFirst && symbol}
        <input
          inputMode={shape.digits > 0 ? "decimal" : "numeric"}
          autoComplete="off"
          aria-describedby={[hintId, errorId].filter(Boolean).join(" ") || undefined}
          aria-invalid={error ? true : undefined}
          {...rest}
          ref={inputRef}
          id={inputId}
          className="eq-money-field-input"
          type="text"
          value={display(plain, shape)}
          disabled={disabled}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
        />
        {!shape.symbolFirst && symbol}
        {currencies && currencies.length > 0 && (
          <select
            className="eq-money-field-currency"
            aria-label="Currency"
            value={code}
            disabled={disabled}
            onChange={handleCurrency}
          >
            {currencies.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
        )}
      </div>
      {hint && (
        <p className="eq-money-field-hint" id={hintId}>
          {hint}
        </p>
      )}
      {error && (
        <p className="eq-money-field-error" id={errorId}>
          {error}
        </p>
      )}
      {name && <input type="hidden" name={name} value={padded(amount, shape)} disabled={disabled} />}
    </div>
  );
}