import { jsx as o, jsxs as k } from "react/jsx-runtime";
import { useCallback as v } from "react";
import g from "../../hooks/useHtmlEditorTextColor.js";
import T from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import y from "../../../box/Box.js";
import E from "../html-editor-color-swatch-grid/HtmlEditorColorSwatchGrid.js";
import w from "../html-editor-hex-color-input/HtmlEditorHexColorInput.js";
import I from "../../../button/Button.js";
import n from "../../../icon/Icon.js";
const z = ({ onAction: l, selectedTextColor: r, selectedBgColor: a, colorPalette: i }) => {
  const {
    activeTab: c,
    palette: m,
    activeColor: p,
    previewHex: s,
    hexInput: d,
    colorInputRef: h,
    handleTabChange: x,
    handleSwatchClick: f,
    handleHexApply: e,
    handleReset: b,
    handleHexChange: u,
    handleColorPickerInput: C
  } = g(l, r, a, i), H = v(
    (t) => {
      t.key === "Enter" && (t.preventDefault(), e());
    },
    [e]
  );
  return /* @__PURE__ */ o(
    T,
    {
      action: "textColor",
      icon: (
        // Icon color reflects the selected text color (via CSS `color` → `selectedTextColor`).
        // div background reflects the selected background color.
        /* @__PURE__ */ o("div", { className: "border border-[var(--base-border)] rounded-[var(--border-radius-sm)]", style: { backgroundColor: a }, children: /* @__PURE__ */ o(n, { name: "Baseline", size: 16, color: r }) })
      ),
      ariaLabel: "Textfarbe",
      children: /* @__PURE__ */ k(y, { className: "flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-3)]", children: [
        /* @__PURE__ */ o(
          E,
          {
            activeTab: c,
            activeColor: p,
            palette: m,
            onTabChange: x,
            onSwatchClick: f
          }
        ),
        /* @__PURE__ */ o(
          w,
          {
            previewHex: s,
            colorInputRef: h,
            hexInput: d,
            onColorPickerInput: C,
            onHexChange: u,
            onHexApply: e,
            onHexKeyDown: H
          }
        ),
        /* @__PURE__ */ o(
          I,
          {
            variant: "ghost",
            onClick: b,
            "aria-label": "Farbe zurücksetzen",
            icon: /* @__PURE__ */ o(n, { name: "Trash2", size: 16 }),
            iconPosition: "left",
            label: "Zurücksetzen"
          }
        )
      ] })
    }
  );
};
z.displayName = "HtmlEditorTextColorAction";
export {
  z as default
};
//# sourceMappingURL=HtmlEditorTextColorAction.js.map
