Address form

"use client";

import { useId, useState } from "react";
import type { ChangeEvent, ComponentProps, CSSProperties, HTMLAttributes, ReactNode } from "react";
import { Field } from "./field";
import { Select } from "./select";
import "./address-form.css";

/** The pieces of a postal address. Each one submits as namePrefix + key. */
export type AddressFieldKey = "country" | "name" | "organization" | "line1" | "line2" | "city" | "region" | "postal" | "tel";

export type AddressCountry = "US" | "GB" | "CA" | "AU" | "DE" | "FR" | "IN" | "JP";

type Spec = {
  /** English name for the country select. */
  name: string;
  /** Rows of fields in the order the country writes an address. Two or three keys share a row. */
  rows: AddressFieldKey[][];
  /** Labels that differ from the base ones. */
  labels: Partial<Record<AddressFieldKey, string>>;
  /** Fields that must be filled, on top of country, name, line1, city and postal. */
  regionRequired: boolean;
  postalPattern?: string;
  postalInputMode: HTMLAttributes<HTMLInputElement>["inputMode"];
};

/* Labels follow each country's own forms in English; patterns only where the format is fixed. */
const COUNTRIES: Record<AddressCountry, Spec> = {
  US: {
    name: "United States",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["city", "region", "postal"], ["tel"]],
    labels: { line1: "Street address", line2: "Apartment, suite, unit (optional)", city: "City", region: "State", postal: "ZIP code" },
    regionRequired: true,
    postalPattern: "\\d{5}(-\\d{4})?",
    postalInputMode: "numeric",
  },
  GB: {
    name: "United Kingdom",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["city", "postal"], ["region"], ["tel"]],
    labels: { line1: "Address line 1", line2: "Address line 2 (optional)", city: "Town or city", region: "County (optional)", postal: "Postcode" },
    regionRequired: false,
    postalInputMode: "text",
  },
  CA: {
    name: "Canada",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["city", "region", "postal"], ["tel"]],
    labels: { line1: "Street address", line2: "Apartment, suite, unit (optional)", city: "City", region: "Province", postal: "Postal code" },
    regionRequired: true,
    postalInputMode: "text",
  },
  AU: {
    name: "Australia",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["city", "region", "postal"], ["tel"]],
    labels: { line1: "Street address", line2: "Apartment, unit, level (optional)", city: "Suburb", region: "State", postal: "Postcode" },
    regionRequired: true,
    postalPattern: "\\d{4}",
    postalInputMode: "numeric",
  },
  DE: {
    name: "Germany",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["postal", "city"], ["tel"]],
    labels: { line1: "Street and house number", line2: "Additional address details (optional)", city: "City", postal: "Postal code" },
    regionRequired: false,
    postalPattern: "\\d{5}",
    postalInputMode: "numeric",
  },
  FR: {
    name: "France",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["postal", "city"], ["tel"]],
    labels: { line1: "Street address", line2: "Building, floor, apartment (optional)", city: "City", postal: "Postal code" },
    regionRequired: false,
    postalPattern: "\\d{5}",
    postalInputMode: "numeric",
  },
  IN: {
    name: "India",
    rows: [["country"], ["name"], ["organization"], ["line1"], ["line2"], ["city", "postal"], ["region"], ["tel"]],
    labels: { line1: "Flat, house number, building", line2: "Area, street, village (optional)", city: "Town or city", region: "State", postal: "PIN code" },
    regionRequired: true,
    postalPattern: "\\d{6}",
    postalInputMode: "numeric",
  },
  JP: {
    name: "Japan",
    rows: [["country"], ["name"], ["organization"], ["postal"], ["region", "city"], ["line1"], ["line2"], ["tel"]],
    labels: { line1: "Address", line2: "Building and room (optional)", city: "City, ward, town", region: "Prefecture", postal: "Postal code" },
    regionRequired: true,
    postalPattern: "\\d{3}-?\\d{4}",
    postalInputMode: "numeric",
  },
};

const ORDER = Object.keys(COUNTRIES) as AddressCountry[];

const BASE_LABELS: Record<AddressFieldKey, string> = {
  country: "Country or region",
  name: "Full name",
  organization: "Company (optional)",
  line1: "Street address",
  line2: "Address line 2 (optional)",
  city: "City",
  region: "Region",
  postal: "Postal code",
  tel: "Phone (optional)",
};

/** The autofill token for each key, before any shipping or billing prefix. */
const TOKENS: Record<AddressFieldKey, string> = {
  country: "country",
  name: "name",
  organization: "organization",
  line1: "address-line1",
  line2: "address-line2",
  city: "address-level2",
  region: "address-level1",
  postal: "postal-code",
  tel: "tel",
};

/**
 * Columns a field spans on a 12-column grid, wide and narrow. A postcode takes less room than
 * a town; three fields to a row share it evenly, then the first takes a row of its own.
 */
function spanOf(row: AddressFieldKey[], index: number): CSSProperties {
  let wide = 12;
  let narrow = 12;
  if (row.length === 3) {
    wide = 4;
    narrow = index === 0 ? 12 : 6;
  } else if (row.length === 2) {
    wide = row[index] === "postal" ? 5 : row.includes("postal") ? 7 : 6;
    narrow = wide;
  }
  return { "--_span": wide, "--_narrow": narrow } as CSSProperties;
}

const DEFAULT_FIELDS: AddressFieldKey[] = ["country", "name", "line1", "line2", "city", "region", "postal"];

export type AddressFormProps = Omit<ComponentProps<"fieldset">, "defaultValue" | "onChange"> & {
  /** The group's visible name, such as "Shipping address". */
  legend: ReactNode;
  /** Prefixes every autocomplete token, so a browser keeps the two addresses on a page apart. */
  section?: "shipping" | "billing";
  /** Prefixes every field name, such as "shipping-", so two address groups can share a form. */
  namePrefix?: string;
  /** Controlled country. Pair it with onCountryChange. */
  country?: AddressCountry;
  /** Uncontrolled starting country. */
  defaultCountry?: AddressCountry;
  onCountryChange?: (country: AddressCountry) => void;
  /** Limits the country select to these, in this order. */
  countries?: AddressCountry[];
  /** Which fields to show. They always appear in the country's own order. */
  fields?: AddressFieldKey[];
  /** Starting values by field key. */
  defaultValues?: Partial<Record<AddressFieldKey, string>>;
  /** Error text by field key or by full field name. */
  errors?: Record<string, string>;
  /** Replaces the label of a field for every country, for another language or a house term. */
  labels?: Partial<Record<AddressFieldKey, string>>;
  size?: "s" | "m" | "l";
};

export function AddressForm({
  legend,
  section,
  namePrefix = "",
  country: controlled,
  defaultCountry,
  onCountryChange,
  countries = ORDER,
  fields = DEFAULT_FIELDS,
  defaultValues,
  errors,
  labels,
  size = "m",
  className,
  ...rest
}: AddressFormProps) {
  const id = useId();
  const list = countries.length > 0 ? countries : ORDER;
  const [internal, setInternal] = useState<AddressCountry>(() => {
    const start = defaultCountry ?? (defaultValues?.country as AddressCountry | undefined);
    return start && list.includes(start) ? start : list[0];
  });
  const country = controlled ?? internal;
  const spec = COUNTRIES[country] ?? COUNTRIES[list[0]];
  const shown = new Set(fields);
  const rows = spec.rows.map((row) => row.filter((key) => shown.has(key))).filter((row) => row.length > 0);

  function changeCountry(event: ChangeEvent<HTMLSelectElement>) {
    const next = event.currentTarget.value as AddressCountry;
    if (controlled === undefined) setInternal(next);
    onCountryChange?.(next);
  }

  function render(key: AddressFieldKey) {
    const name = `${namePrefix}${key}`;
    const fieldId = `${id}-${key}`;
    const label = labels?.[key] ?? spec.labels[key] ?? BASE_LABELS[key];
    const autoComplete = [section, TOKENS[key]].filter(Boolean).join(" ");
    const error = errors?.[key] ?? errors?.[name];

    if (key === "country") {
      return (
        <Select id={fieldId} name={name} label={label} size={size} error={error} autoComplete={autoComplete} required value={country} onChange={changeCountry}>
          {list.map((code) => (
            <option key={code} value={code}>
              {COUNTRIES[code].name}
            </option>
          ))}
        </Select>
      );
    }

    const required = key === "name" || key === "line1" || key === "city" || key === "postal" || (key === "region" && spec.regionRequired);
    const postal = key === "postal";
    return (
      <Field
        id={fieldId}
        name={name}
        label={label}
        size={size}
        error={error}
        autoComplete={autoComplete}
        defaultValue={defaultValues?.[key]}
        required={required}
        type={key === "tel" ? "tel" : "text"}
        inputMode={postal ? spec.postalInputMode : undefined}
        pattern={postal ? spec.postalPattern : undefined}
        autoCapitalize={postal && spec.postalInputMode === "text" ? "characters" : undefined}
        spellCheck={false}
      />
    );
  }

  return (
    <fieldset {...rest} className={["eq-address-form", className].filter(Boolean).join(" ")} data-size={size} data-country={country}>
      <legend className="eq-address-form-legend">{legend}</legend>
      <div className="eq-address-form-body">
        {/* One flat grid keyed by field, so a field keeps its value when a new country moves it. */}
        {rows.flatMap((row) =>
          row.map((key, index) => (
            <div key={key} className="eq-address-form-cell" data-field={key} style={spanOf(row, index)}>
              {render(key)}
            </div>
          )),
        )}
      </div>
    </fieldset>
  );
}