import { jsxs as x, Fragment as g, jsx as e } from "react/jsx-runtime";
import { omit as T } from "lodash-es";
import { zIndexLayers as h } from "../../../helpers/zIndexLayers.es.js";
import { DEFAULT_TEXT_STYLE_VALUE as m } from "../types.es.js";
import { DropdownItem as y } from "./DropdownItem.es.js";
import { DropdownTrigger as D } from "./DropdownTrigger.es.js";
import { useTextStyleDropdown as v } from "./useTextStyleDropdown.es.js";
const z = ({ editorId: l, textStyles: t = [] }) => {
  var n;
  const {
    state: { editor: a, toggle: s, isOpen: i },
    dropdownProps: w,
    triggerRef: f,
    dropdownRef: c,
    key: b
  } = v(l);
  let p = m;
  const d = t.find((o) => {
    var r;
    return o.id === b && ((r = o.props) == null ? void 0 : r.label);
  });
  return d && (p = ((n = d.props) == null ? void 0 : n.label) || m), /* @__PURE__ */ x(g, { children: [
    /* @__PURE__ */ e(D, { label: p, open: i, onClick: s, ref: f }),
    i && /* @__PURE__ */ e(
      "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,
        ...w,
        children: t.map((o) => {
          var r;
          return /* @__PURE__ */ e(y, { editor: a, type: o, children: /* @__PURE__ */ e(
            "span",
            {
              style: T(o.styles ?? {}, [
                "color",
                "lineHeight",
                "marginTop",
                "marginBottom"
              ]),
              children: (r = o.props) == null ? void 0 : r.label
            }
          ) }, o.id);
        })
      }
    )
  ] });
};
export {
  z as TextStyleDropdown
};
//# sourceMappingURL=TextStyleDropdown.es.js.map
