import { jsx as r, jsxs as n } from "react/jsx-runtime";
import { Flyout as e, ColorPicker as l } from "@frontify/fondue-components";
import { IconTypography as u } from "@frontify/fondue-icons";
import { useColorDropdownMenuState as m, MARK_COLOR as C, useColorDropdownMenu as h } from "@udecode/plate-font";
import { ToolbarButton as f } from "../../components/Toolbar/ToolbarButton.es.js";
import { getTooltip as g } from "../../helpers/getTooltip.es.js";
import { ButtonWrapper as b, IconStylingWrapper as w } from "../helper.es.js";
const T = (t) => `rgba(${t.red}, ${t.green}, ${t.blue}, ${t.alpha ?? 1})`, y = (t) => {
  if (!t)
    return;
  const o = t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
  if (o)
    return {
      red: parseInt(o[1], 10),
      green: parseInt(o[2], 10),
      blue: parseInt(o[3], 10),
      alpha: parseFloat(o[4] ?? 1)
    };
}, I = "black", $ = ({ id: t }) => {
  const o = m({
    colors: [],
    customColors: [],
    nodeType: C,
    closeOnSelect: !1
  }), { buttonProps: c, menuProps: a } = h(o), d = (p) => {
    const s = T(p);
    s !== o.selectedColor && o.updateColor(s);
  }, i = o.selectedColor || I;
  return /* @__PURE__ */ r(b, { id: t, children: /* @__PURE__ */ n(e.Root, { modal: !0, ...a, children: [
    /* @__PURE__ */ r(e.Trigger, { children: /* @__PURE__ */ r(f, { tooltip: g("Font Color"), ...c, children: /* @__PURE__ */ r(
      w,
      {
        icon: /* @__PURE__ */ n("div", { children: [
          /* @__PURE__ */ r(u, { size: "12" }),
          /* @__PURE__ */ r(
            "div",
            {
              className: "tw-h-1 tw-rounded-small",
              style: { backgroundColor: i }
            }
          )
        ] })
      }
    ) }) }),
    /* @__PURE__ */ r(e.Content, { maxWidth: "600px", children: /* @__PURE__ */ r(e.Body, { children: /* @__PURE__ */ r("div", { className: "tw-p-2 tw-w-[450px] tw-bg-base", children: /* @__PURE__ */ n(
      l.Root,
      {
        currentColor: y(o.selectedColor),
        onColorChange: d,
        children: [
          /* @__PURE__ */ r(l.Values, {}),
          /* @__PURE__ */ r(l.Gradient, {})
        ]
      }
    ) }) }) })
  ] }) });
};
export {
  $ as FontColorButton
};
//# sourceMappingURL=FontColorButton.es.js.map
