import { jsx as c, jsxs as x } from "react/jsx-runtime";
import { useState as T, useRef as k, useCallback as d, useMemo as b } from "react";
import { TYPOGRAPHY_STYLES as i } from "../../constants/index.js";
import I from "../../../icon/Icon.js";
import w from "../../../text/Text.js";
import A from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import { c as h } from "../../../../index-BtlgVD4m.js";
const D = ({ onAction: m, selectedStyle: n }) => {
  const [t, l] = T(
    () => Math.max(
      0,
      i.findIndex((e) => e.value === n)
    )
  ), p = k(Array(i.length).fill(null)), u = d(
    (e) => {
      m(e);
    },
    [m]
  ), f = d(
    (e) => {
      var s, a;
      const o = i.length;
      if (e.key === "ArrowDown") {
        e.preventDefault();
        const r = (t + 1) % o;
        l(r), (s = p.current[r]) == null || s.focus();
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        const r = (t - 1 + o) % o;
        l(r), (a = p.current[r]) == null || a.focus();
      }
    },
    [t]
  ), g = b(() => {
    var e;
    return ((e = i.find((o) => o.value === n)) == null ? void 0 : e.label) ?? "Paragraph";
  }, [n]), v = b(
    () => (
      // role="menu" marks this as a composite widget so screen readers
      // announce arrow-key navigation instead of reading each Tab stop.
      /* @__PURE__ */ c("div", { role: "menu", "aria-label": "Typographie", className: "flex flex-col", onKeyDown: f, children: i.map(({ value: e, label: o, type: s }, a) => {
        const r = n === e;
        return /* @__PURE__ */ x(
          "button",
          {
            ref: (y) => {
              p.current[a] = y;
            },
            type: "button",
            role: "menuitemradio",
            "aria-checked": r,
            tabIndex: t === a ? 0 : -1,
            onClick: () => u(e),
            onFocus: () => l(a),
            className: h(
              "hover:cursor-pointer",
              "flex w-full items-center gap-[var(--spacing-2)] px-[var(--spacing-2)] py-[var(--spacing-1-5)]",
              "rounded-[var(--border-radius-md)]",
              // Highlight background when this style is currently active
              r && "bg-[var(--base-accent)]",
              "hover:bg-[var(--base-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--base-primary)]"
            ),
            children: [
              /* @__PURE__ */ c(I, { name: "Check", size: 16, className: h("shrink-0", r ? "opacity-100" : "opacity-0") }),
              /* @__PURE__ */ c(w, { type: s, as: "span", isLeading: !1, children: o })
            ]
          },
          e
        );
      }) })
    ),
    [n, t, u, f]
  );
  return /* @__PURE__ */ c(A, { action: "typography", label: g, ariaLabel: "Typographie", children: v });
};
D.displayName = "HtmlEditorTypographyAction";
export {
  D as default
};
//# sourceMappingURL=HtmlEditorTypographyAction.js.map
