import { jsxs as x, Fragment as T, jsx as r } from "react/jsx-runtime";
import { zIndexLayers as h } from "../../../helpers/zIndexLayers.es.js";
import { DEFAULT_TEXT_STYLE_VALUE as l } from "../types.es.js";
import { DropdownItem as y } from "./DropdownItem.es.js";
import { DropdownTrigger as D } from "./DropdownTrigger.es.js";
import { useTextStyleDropdown as g } from "./useTextStyleDropdown.es.js";
const j = ({ editorId: m, textStyles: t = [] }) => {
  var n;
  const {
    state: { editor: s, toggle: w, isOpen: d },
    dropdownProps: a,
    triggerRef: f,
    dropdownRef: c,
    key: b
  } = g(m);
  let p = l;
  const i = t.find((e) => {
    var o;
    return e.id === b && ((o = e.props) == null ? void 0 : o.label);
  });
  return i && (p = ((n = i.props) == null ? void 0 : n.label) || l), /* @__PURE__ */ x(T, { children: [
    /* @__PURE__ */ r(D, { label: p, open: d, onClick: w, ref: f }),
    d && /* @__PURE__ */ r(
      "div",
      {
        style: { zIndex: h.textStyleDropdown },
        className: "tw-divide-y tw-divide-line tw-bg-base tw-shadow-md tw-border tw-border-line tw-overflow-auto tw-min-h-[40px]",
        ref: c,
        ...a,
        children: t.map((e) => {
          var o;
          return /* @__PURE__ */ r(y, { editor: s, type: e, children: /* @__PURE__ */ r("span", { style: e.styles ?? {}, children: (o = e.props) == null ? void 0 : o.label }) }, e.id);
        })
      }
    )
  ] });
};
export {
  j as TextStyleDropdown
};
//# sourceMappingURL=TextStyleDropdown.es.js.map
