Dropdown

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ComponentProps, KeyboardEvent, ReactNode, ToggleEvent } from "react";
import "./dropdown.css";

export type DropdownOption = {
  value: string;
  /** What the row and, once picked, the trigger show. Type-ahead matches its text. */
  label: ReactNode;
  /** A second, quieter line under the label. Shown in the list only. */
  description?: ReactNode;
  /** An icon, swatch or other content before the label, in the list and the trigger. */
  lead?: ReactNode;
  disabled?: boolean;
};

export type DropdownGroup = {
  /** Heading of the group. */
  group: ReactNode;
  options: DropdownOption[];
};

export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";

export type DropdownProps = Omit<ComponentProps<"button">, "value" | "defaultValue" | "children"> & {
  /** Visible label above the trigger. */
  label: ReactNode;
  /** Help text under the trigger, announced as its description. */
  hint?: ReactNode;
  /** Error text. When set, the trigger is marked invalid and the text is announced with it. */
  error?: ReactNode;
  /** Options, and groups of options, in order. Each value must be unique. */
  options: (DropdownOption | DropdownGroup)[];
  /** Controlled value; null shows the placeholder. */
  value?: string | null;
  /** Uncontrolled starting value. */
  defaultValue?: string;
  /** Called with the picked option's value. Not called when the current option is picked again. */
  onValueChange?: (value: string) => void;
  /** Shown in the trigger while no option is picked. */
  placeholder?: ReactNode;
  /** Submits the value in a hidden input under this name. */
  name?: string;
  size?: "s" | "m" | "l";
  /** Side of the trigger the list opens on, and the edge it lines up with. Flips when it does not fit. */
  placement?: DropdownPlacement;
};

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function isGroup(item: DropdownOption | DropdownGroup): item is DropdownGroup {
  return "options" in item;
}

/* Must match the @supports condition in dropdown.css exactly. */
const ANCHOR_SUPPORT =
  "(anchor-name: --a) and (position-area: block-end) and (position-try-fallbacks: flip-block)";

function anchorSupported() {
  return typeof CSS !== "undefined" && CSS.supports(ANCHOR_SUPPORT);
}

/** Fallback for engines without anchor positioning: fixed coordinates from the trigger's box. */
function place(trigger: Element, surface: HTMLElement, placement: DropdownPlacement) {
  const box = trigger.getBoundingClientRect();
  const viewWidth = document.documentElement.clientWidth;
  const viewHeight = document.documentElement.clientHeight;
  const gap = parseFloat(getComputedStyle(surface).marginTop) || 0;
  let top = placement.startsWith("top");
  let end = placement.endsWith("end");
  surface.style.minWidth = `${box.width}px`;

  // Size is only known once shown; flip to the other side when this one does not fit.
  const height = surface.offsetHeight + gap;
  const width = surface.offsetWidth;
  if (surface.offsetHeight > 0) {
    if (!top && box.bottom + height > viewHeight && box.top - height >= 0) top = true;
    else if (top && box.top - height < 0 && box.bottom + height <= viewHeight) top = false;
    if (!end && box.left + width > viewWidth && box.right - width >= 0) end = true;
    else if (end && box.right - width < 0 && box.left + width <= viewWidth) end = false;
  }

  const style = surface.style;
  style.top = top ? "auto" : `${box.bottom}px`;
  style.bottom = top ? `${viewHeight - box.top}px` : "auto";
  style.left = end ? "auto" : `${box.left}px`;
  style.right = end ? `${viewWidth - box.right}px` : "auto";
}

export function Dropdown({
  label,
  hint,
  error,
  options,
  value,
  defaultValue,
  onValueChange,
  placeholder = "Choose",
  name,
  size = "m",
  placement = "bottom-start",
  id,
  className,
  style,
  disabled,
  onKeyDown,
  onKeyUp,
  onBlur,
  "aria-describedby": describedBy,
  "aria-invalid": ariaInvalid,
  ...rest
}: DropdownProps) {
  const auto = useId();
  const triggerId = id ?? `${auto}trigger`;
  const labelId = `${auto}label`;
  const listId = `${auto}list`;
  const hintId = `${auto}hint`;
  const errorId = `${auto}error`;
  const optionId = (index: number) => `${auto}option${index}`;
  const anchorName = `--eq-dropdown-${auto.replace(/[^\w-]/g, "")}`;

  const triggerRef = useRef<HTMLButtonElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const typed = useRef({ text: "", at: 0 });
  /** Which option to light up when the list next opens; null means the picked one. */
  const openAt = useRef<number | null>(null);
  /** Space was handled in the open list; its key up must not click the trigger and reopen it. */
  const swallowSpace = useRef(false);

  const [inner, setInner] = useState<string | null>(defaultValue ?? null);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  /** Keys moved the highlight last, so it gets a ring; a pointer only tints it. */
  const [byKeys, setByKeys] = useState(false);

  const selected = value !== undefined ? value : inner;
  const flat = options.flatMap((item) => (isGroup(item) ? item.options : [item]));
  const selectedIndex = flat.findIndex((option) => option.value === selected);
  const current = flat[selectedIndex];

  function usable(index: number) {
    return index >= 0 && index < flat.length && !flat[index].disabled;
  }

  /** The nearest usable option from index in the direction of step, or -1. */
  function seek(index: number, step: 1 | -1) {
    for (let i = index; i >= 0 && i < flat.length; i += step) if (usable(i)) return i;
    return -1;
  }

  function first() {
    return seek(0, 1);
  }

  function last() {
    return seek(flat.length - 1, -1);
  }

  function isOpen() {
    return listRef.current?.matches(":popover-open") ?? false;
  }

  function show(at: number | null) {
    // Lit at once, not on the toggle event, so a key pressed straight after acts on it.
    const target = at ?? (usable(selectedIndex) ? selectedIndex : first());
    openAt.current = target;
    setActive(target);
    // A click, not showPopover(), so the trigger stays the popover's invoker
    // and a later click on it closes the list instead of reopening it.
    if (!isOpen()) triggerRef.current?.click();
  }

  function hide() {
    if (isOpen()) listRef.current?.hidePopover();
  }

  function choose(index: number) {
    if (!usable(index)) return;
    const next = flat[index].value;
    if (next !== selected) {
      if (value === undefined) setInner(next);
      onValueChange?.(next);
    }
  }

  function move(index: number) {
    if (index < 0) return;
    setActive(index);
    setByKeys(true);
  }

  /** Type-ahead: the next option whose label starts with what was typed in the last moment. */
  function match(key: string, timeStamp: number, from: number) {
    const memory = typed.current;
    memory.text = timeStamp - memory.at > 600 ? key.toLowerCase() : memory.text + key.toLowerCase();
    memory.at = timeStamp;
    const repeated = memory.text.length > 1 && [...memory.text].every((c) => c === memory.text[0]);
    const search = repeated ? memory.text[0] : memory.text;
    // A fresh search starts after the highlighted option, so pressing one letter cycles through matches.
    const start = search.length === 1 ? from + 1 : Math.max(from, 0);
    const labels = listRef.current?.querySelectorAll<HTMLElement>(".eq-dropdown-option-label");
    for (let step = 0; step < flat.length; step++) {
      const index = (start + step) % flat.length;
      const text = labels?.[index]?.textContent ?? "";
      if (usable(index) && text.trim().toLowerCase().startsWith(search)) return index;
    }
    return -1;
  }

  function typing(timeStamp: number) {
    return typed.current.text !== "" && timeStamp - typed.current.at <= 600;
  }

  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || disabled) return;
    const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;

    if (!isOpen()) {
      let at: number | null | undefined;
      if (event.key === "ArrowDown" || event.key === "ArrowUp") at = null;
      else if (event.key === "Home") at = first();
      else if (event.key === "End") at = last();
      else if (printable && event.key !== " ") at = match(event.key, event.timeStamp, selectedIndex);
      // Enter and Space fall through to the button's own click, which opens the list.
      if (at === undefined) return;
      event.preventDefault();
      event.stopPropagation();
      setByKeys(true);
      show(at === -1 ? null : at);
      return;
    }

    let next: number | undefined;
    switch (event.key) {
      case "ArrowDown":
        if (event.altKey) return;
        next = active < 0 ? first() : seek(active + 1, 1);
        if (next < 0) next = active;
        break;
      case "ArrowUp":
        if (event.altKey) {
          choose(active);
          hide();
          event.preventDefault();
          return;
        }
        next = active < 0 ? last() : seek(active - 1, -1);
        if (next < 0) next = active;
        break;
      case "Home":
      case "PageUp":
        next = event.key === "Home" ? first() : seek(Math.max(0, active - 10), 1);
        break;
      case "End":
      case "PageDown":
        next = event.key === "End" ? last() : seek(Math.min(flat.length - 1, active + 10), -1);
        break;
      case "Enter":
        event.preventDefault();
        event.stopPropagation();
        choose(active);
        hide();
        return;
      case " ":
        event.preventDefault();
        event.stopPropagation();
        swallowSpace.current = true;
        if (typing(event.timeStamp)) {
          next = match(" ", event.timeStamp, active);
          break;
        }
        choose(active);
        hide();
        return;
      case "Escape":
        event.preventDefault();
        event.stopPropagation();
        hide();
        return;
      case "Tab":
        // Picks the highlighted option and lets the browser move focus on.
        choose(active);
        hide();
        return;
      default:
        if (!printable) return;
        next = match(event.key, event.timeStamp, active);
    }

    event.preventDefault();
    event.stopPropagation();
    if (next !== undefined) move(next);
  }

  function handleToggle(event: ToggleEvent<HTMLDivElement>) {
    const opening = event.newState === "open";
    setOpen(opening);
    if (!opening) {
      setActive(-1);
      setByKeys(false);
      return;
    }
    const trigger = triggerRef.current;
    // Some engines do not focus a button on click; the trigger must hold focus to take the keys.
    if (trigger && document.activeElement !== trigger) trigger.focus({ preventScroll: true });
    if (trigger && !anchorSupported()) place(trigger, event.currentTarget, placement);
    const at = openAt.current;
    openAt.current = null;
    setActive(at ?? (usable(selectedIndex) ? selectedIndex : first()));
  }

  // Keep the highlighted row in view inside the list, without scrolling the page.
  useEffect(() => {
    const list = listRef.current;
    if (!open || !list || active < 0) return;
    const row = document.getElementById(optionId(active));
    if (!row) return;
    const top = row.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop;
    const pad = parseFloat(getComputedStyle(list).paddingTop) || 0;
    if (top - pad < list.scrollTop) list.scrollTop = top - pad;
    else if (top + row.offsetHeight + pad > list.scrollTop + list.clientHeight) {
      list.scrollTop = top + row.offsetHeight + pad - list.clientHeight;
    }
  });

  // Without anchor positioning, the list follows the trigger while the page scrolls.
  useEffect(() => {
    if (!open || anchorSupported()) return;
    function update() {
      if (triggerRef.current && listRef.current) place(triggerRef.current, listRef.current, placement);
    }
    window.addEventListener("scroll", update, true);
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update, true);
      window.removeEventListener("resize", update);
    };
  }, [open, placement]);

  const described = [describedBy, present(hint) ? hintId : null, present(error) ? errorId : null]
    .filter(Boolean)
    .join(" ");

  let index = -1;
  function row(option: DropdownOption) {
    index += 1;
    const at = index;
    return (
      <div
        key={option.value}
        id={optionId(at)}
        role="option"
        className="eq-dropdown-option"
        aria-selected={option.value === selected}
        aria-disabled={option.disabled || undefined}
        data-active={at === active || undefined}
        onPointerMove={() => {
          if (at !== active && usable(at)) {
            setActive(at);
            setByKeys(false);
          }
        }}
        onClick={() => {
          if (!usable(at)) return;
          choose(at);
          hide();
          triggerRef.current?.focus();
        }}
      >
        {present(option.lead) && <span className="eq-dropdown-option-lead">{option.lead}</span>}
        <span className="eq-dropdown-option-text">
          <span className="eq-dropdown-option-label">{option.label}</span>
          {present(option.description) && (
            <span className="eq-dropdown-option-description">{option.description}</span>
          )}
        </span>
        <svg className="eq-dropdown-tick" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M3.5 8.5l3 3 6-7" pathLength={1} />
        </svg>
      </div>
    );
  }

  return (
    <div className={["eq-dropdown", className].filter(Boolean).join(" ")} style={style} data-size={size}>
      {/* Not a <label for>: that would click the trigger and open the list. */}
      <span className="eq-dropdown-label" id={labelId} onClick={() => triggerRef.current?.focus()}>
        {label}
      </span>
      <button
        type="button"
        {...rest}
        ref={triggerRef}
        id={triggerId}
        className="eq-dropdown-trigger"
        style={{ anchorName }}
        disabled={disabled}
        popoverTarget={listId}
        role="combobox"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={listId}
        aria-labelledby={labelId}
        aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
        aria-describedby={described || undefined}
        aria-invalid={present(error) ? true : ariaInvalid}
        onKeyDown={handleKeyDown}
        onKeyUp={(event) => {
          onKeyUp?.(event);
          // Space activates a button on key up; once it has picked an option, that click must not reopen the list.
          if (event.key === " " && swallowSpace.current) {
            swallowSpace.current = false;
            event.preventDefault();
          }
        }}
        onBlur={(event) => {
          onBlur?.(event);
          hide();
        }}
      >
        {current && present(current.lead) && <span className="eq-dropdown-lead">{current.lead}</span>}
        <span className="eq-dropdown-value" data-placeholder={current ? undefined : true}>
          {current ? current.label : placeholder}
        </span>
        <svg className="eq-dropdown-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="m4.5 6.25 3.5 3.5 3.5-3.5" />
        </svg>
      </button>
      {present(hint) && (
        <p className="eq-dropdown-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-dropdown-error" id={errorId}>
          {error}
        </p>
      )}
      {name !== undefined && <input type="hidden" name={name} value={selected ?? ""} disabled={disabled} />}
      <div
        ref={listRef}
        id={listId}
        popover="auto"
        role="listbox"
        aria-labelledby={labelId}
        className="eq-dropdown-list"
        data-placement={placement}
        data-keys={byKeys || undefined}
        style={{ positionAnchor: anchorName }}
        onToggle={handleToggle}
        // A press inside the list must not take focus from the trigger, which owns the keyboard.
        onMouseDown={(event) => event.preventDefault()}
      >
        {options.map((item, at) =>
          isGroup(item) ? (
            <div key={`group${at}`} role="group" aria-labelledby={`${auto}group${at}`} className="eq-dropdown-group">
              <div id={`${auto}group${at}`} className="eq-dropdown-group-label">
                {item.group}
              </div>
              {item.options.map(row)}
            </div>
          ) : (
            row(item)
          ),
        )}
      </div>
    </div>
  );
}