import clsx from "clsx";
import type { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from "react";
import { fieldClass, type FieldSize } from "./fieldStyles";

// The text-field primitives (docs/DESIGN.md A4). Every text, number, password, e-mail, search
// and date box is an `Input`; a multi-line one a `Textarea`; a box whose frame also holds an icon,
// chips or a clear button is a wrapper painted with `fieldClass` around an `InnerInput`. A raw
// `<input>` or `<textarea>` anywhere else is a lint error (`local/input-primitive`), so the
// frame, the focus edge and the coarse-pointer 1rem text cannot drift apart again.
//
// `className` lays the field out (width, margin, font weight); its box and edge are the rung's.

type Common = {
  /** The rung (`FieldSize`): `md` 32 in a form (default), `sm` 28 in a toolbar, a popover or an inline rename, `xs` 24 in a row, `heading` for a title rename. */
  size?: FieldSize;
  /** A toolbar search (A4): a pill instead of r8. */
  pill?: boolean;
  /** Marks the field invalid (the danger edge) and says so to a screen reader. */
  invalid?: boolean;
};

export function Input({
  size,
  pill,
  invalid,
  className,
  ref,
  ...rest
}: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & Common & { ref?: Ref<HTMLInputElement> }) {
  return (
    <input
      ref={ref}
      aria-invalid={invalid || undefined}
      className={clsx(fieldClass({ size, pill }), className)}
      {...rest}
    />
  );
}

export function Textarea({
  invalid,
  className,
  ref,
  ...rest
}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
  invalid?: boolean;
  ref?: Ref<HTMLTextAreaElement>;
}) {
  return (
    <textarea
      ref={ref}
      aria-invalid={invalid || undefined}
      className={clsx(
        fieldClass({ size: "free" }),
        "px-3 py-1.5 text-sm pointer-coarse:text-base",
        className,
      )}
      {...rest}
    />
  );
}

/** The bare text box inside a `fieldClass` frame: no edge, no box, it fills the frame's free width AND
 * height (`self-stretch`), so the whole frame is the target, not a 20px line of text in it (B1, A3). */
export function InnerInput({
  className,
  ref,
  ...rest
}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
  return (
    <input
      ref={ref}
      className={clsx(
        "min-w-0 flex-1 self-stretch bg-transparent text-fg outline-hidden placeholder:text-muted",
        className,
      )}
      {...rest}
    />
  );
}