Tabs

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useId,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type MouseEvent,
} from "react";
import "./tabs.css";

type TabsContextValue = {
  value: string;
  select: (value: string) => void;
  idFor: (kind: "tab" | "panel", value: string) => string;
};

const TabsContext = createContext<TabsContextValue | null>(null);

function useTabs(component: string): TabsContextValue {
  const context = useContext(TabsContext);
  if (!context) throw new Error(`<${component}> must be inside <Tabs>.`);
  return context;
}

export type TabsProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> &
  (
    | {
        /** The selected tab's value. Pair with onValueChange. */
        value: string;
        defaultValue?: never;
        onValueChange: (value: string) => void;
      }
    | {
        value?: never;
        /** The tab selected on first render, when Tabs keeps its own state. */
        defaultValue: string;
        /** Called with the new value whenever the selection changes. */
        onValueChange?: (value: string) => void;
      }
  );

export function Tabs({ value, defaultValue, onValueChange, className, children, ...rest }: TabsProps) {
  const baseId = useId();
  const [own, setOwn] = useState(defaultValue ?? "");
  const selected = value ?? own;

  const context: TabsContextValue = {
    value: selected,
    select(next) {
      if (next === selected) return;
      if (value === undefined) setOwn(next);
      onValueChange?.(next);
    },
    // aria-controls is a space-separated id list, so anything but [\w-] is replaced.
    idFor: (kind, v) => `${baseId}-${kind}-${v.replace(/[^\w-]/g, "_")}`,
  };

  return (
    <TabsContext.Provider value={context}>
      <div {...rest} className={["eq-tabs", className].filter(Boolean).join(" ")}>
        {children}
      </div>
    </TabsContext.Provider>
  );
}

export type TabListProps = ComponentProps<"div">;

export function TabList({ className, onKeyDown, ...rest }: TabListProps) {
  const { select } = useTabs("TabList");

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;

    const list = event.currentTarget;
    // Only this list's own tabs, so a Tabs nested inside a panel is left alone.
    const tabs = Array.from(list.querySelectorAll<HTMLButtonElement>('[role="tab"]')).filter(
      (tab) => tab.closest('[role="tablist"]') === list && !tab.disabled,
    );
    const current = tabs.findIndex((tab) => tab === document.activeElement);
    if (current === -1 || tabs.length === 0) return;

    // In right-to-left text the arrows follow what the reader sees.
    const forward = getComputedStyle(list).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
    const back = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
    let next: number;
    if (event.key === forward) next = (current + 1) % tabs.length;
    else if (event.key === back) next = (current - 1 + tabs.length) % tabs.length;
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = tabs.length - 1;
    else return;

    event.preventDefault();
    const tab = tabs[next];
    tab.focus();
    const v = tab.dataset.value;
    if (v !== undefined) select(v);
  }

  return (
    <div
      {...rest}
      role="tablist"
      className={["eq-tabs-list", className].filter(Boolean).join(" ")}
      onKeyDown={handleKeyDown}
    />
  );
}

export type TabProps = Omit<ComponentProps<"button">, "value"> & {
  /** Matches the value of the TabPanel this tab shows. */
  value: string;
};

export function Tab({ value, className, onClick, ...rest }: TabProps) {
  const tabs = useTabs("Tab");
  const selected = tabs.value === value;

  function handleClick(event: MouseEvent<HTMLButtonElement>) {
    onClick?.(event);
    if (!event.defaultPrevented) tabs.select(value);
  }

  return (
    <button
      type="button"
      {...rest}
      role="tab"
      id={tabs.idFor("tab", value)}
      className={["eq-tabs-tab", className].filter(Boolean).join(" ")}
      data-value={value}
      aria-selected={selected}
      aria-controls={tabs.idFor("panel", value)}
      tabIndex={selected ? 0 : -1}
      onClick={handleClick}
    />
  );
}

export type TabPanelProps = ComponentProps<"div"> & {
  /** Matches the value of the Tab that shows this panel. */
  value: string;
};

const FOCUSABLE =
  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], summary';

export function TabPanel({ value, className, tabIndex, ...rest }: TabPanelProps) {
  const tabs = useTabs("TabPanel");
  const id = tabs.idFor("panel", value);
  const selected = tabs.value === value;
  // Focusable on the server; after mount, only while it holds nothing focusable itself.
  const [hasFocusable, setHasFocusable] = useState(false);

  useEffect(() => {
    const panel = document.getElementById(id);
    const found = panel?.querySelector(FOCUSABLE) != null;
    if (found !== hasFocusable) setHasFocusable(found);
  });

  return (
    <div
      role="tabpanel"
      {...rest}
      id={id}
      className={["eq-tabs-panel", className].filter(Boolean).join(" ")}
      aria-labelledby={tabs.idFor("tab", value)}
      tabIndex={tabIndex ?? (hasFocusable ? undefined : 0)}
      hidden={!selected}
    />
  );
}