Toolbar

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type FocusEvent,
  type KeyboardEvent,
  type MouseEvent,
} from "react";
import "./toolbar.css";

type Orientation = "horizontal" | "vertical";

const OrientationContext = createContext<Orientation>("horizontal");

const ITEMS = 'button, a[href], select, input, textarea, [tabindex]:not([tabindex="-1"]), [data-eq-toolbar-item]';

/** Controls that need some of these keys for themselves: text fields all of them, a select Up and Down. */
function ownsKey(element: Element, key: string) {
  if (element instanceof HTMLSelectElement) return key === "ArrowUp" || key === "ArrowDown";
  if (element instanceof HTMLTextAreaElement) return true;
  if (!(element instanceof HTMLInputElement)) return false;
  return !["button", "checkbox", "radio", "reset", "submit", "image", "color", "file"].includes(element.type);
}

export type ToolbarProps = ComponentProps<"div"> & {
  /** Names the toolbar, e.g. "Text formatting". */
  label: string;
  orientation?: Orientation;
};

/**
 * One tab stop for the whole row. Arrow keys move between the items with a roving
 * tabindex, and the toolbar remembers the last item that had focus.
 */
export function Toolbar({
  label,
  orientation = "horizontal",
  className,
  onFocus,
  onKeyDown,
  children,
  ...rest
}: ToolbarProps) {
  const root = useRef<HTMLDivElement>(null);
  const active = useRef<Element | null>(null);

  function items() {
    const list = root.current ? [...root.current.querySelectorAll<HTMLElement>(ITEMS)] : [];
    return list.filter((item) => !item.hidden && !(item instanceof HTMLButtonElement && item.disabled));
  }

  function rove(current: Element | null) {
    const list = items();
    const target = current && list.includes(current as HTMLElement) ? current : list[0];
    active.current = target ?? null;
    for (const item of list) {
      item.setAttribute("data-eq-toolbar-item", "");
      item.tabIndex = item === target ? 0 : -1;
    }
  }

  // Re-sync after every render and whenever the children change underneath.
  useEffect(() => {
    rove(active.current);
    const node = root.current;
    if (!node) return;
    const observer = new MutationObserver(() => rove(active.current));
    observer.observe(node, { childList: true, subtree: true });
    return () => observer.disconnect();
  });

  function handleFocus(event: FocusEvent<HTMLDivElement>) {
    onFocus?.(event);
    const item = items().find((each) => each === event.target);
    if (item && item !== active.current) rove(item);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const list = items();
    const index = list.findIndex((item) => item === event.target);
    if (index === -1) return;
    const prev = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
    const next = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
    let to = -1;
    if (event.key === prev) to = (index - 1 + list.length) % list.length;
    else if (event.key === next) to = (index + 1) % list.length;
    else if (event.key === "Home") to = 0;
    else if (event.key === "End") to = list.length - 1;
    else return;
    if (ownsKey(list[index] as Element, event.key)) return;
    event.preventDefault();
    const target = list[to];
    if (!target) return;
    rove(target);
    target.focus();
  }

  return (
    <OrientationContext.Provider value={orientation}>
      <div
        ref={root}
        role="toolbar"
        aria-label={label}
        aria-orientation={orientation}
        {...rest}
        className={["eq-toolbar", className].filter(Boolean).join(" ")}
        data-orientation={orientation}
        onFocus={handleFocus}
        onKeyDown={handleKeyDown}
      >
        {children}
      </div>
    </OrientationContext.Provider>
  );
}

export type ToolbarButtonProps = ComponentProps<"button"> & {
  /** Makes it a toggle: true and false set aria-pressed. Leave out for a plain action. */
  pressed?: boolean;
  /** Uncontrolled starting state for a toggle. */
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  /** Accessible name. Required when the children are only an icon. */
  label?: string;
};

export function ToolbarButton({
  pressed,
  defaultPressed,
  onPressedChange,
  label,
  disabled,
  className,
  onClick,
  children,
  ...rest
}: ToolbarButtonProps) {
  const [inner, setInner] = useState(defaultPressed);
  const value = pressed ?? inner;

  function handleClick(event: MouseEvent<HTMLButtonElement>) {
    // Disabled items stay focusable so they can be found, but they do nothing.
    if (disabled) {
      event.preventDefault();
      return;
    }
    onClick?.(event);
    if (event.defaultPrevented || value === undefined) return;
    if (pressed === undefined) setInner(!value);
    onPressedChange?.(!value);
  }

  return (
    <button
      type="button"
      aria-label={label}
      {...rest}
      className={["eq-toolbar-button", className].filter(Boolean).join(" ")}
      aria-pressed={value}
      aria-disabled={disabled || undefined}
      onClick={handleClick}
    >
      {children}
    </button>
  );
}

export function ToolbarSeparator({ className, ...rest }: ComponentProps<"div">) {
  const orientation = useContext(OrientationContext);
  return (
    <div
      role="separator"
      aria-orientation={orientation === "horizontal" ? "vertical" : "horizontal"}
      {...rest}
      className={["eq-toolbar-separator", className].filter(Boolean).join(" ")}
    />
  );
}

export type ToolbarGroupProps = ComponentProps<"div"> & {
  /** Names the group, e.g. "Alignment". */
  label: string;
};

export function ToolbarGroup({ label, className, ...rest }: ToolbarGroupProps) {
  return (
    <div
      role="group"
      aria-label={label}
      {...rest}
      className={["eq-toolbar-group", className].filter(Boolean).join(" ")}
    />
  );
}