import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { useCallback as g } from "react";
import { STYLE_ACTIONS as T, LIST_ACTIONS as U } from "../../constants/index.js";
import O from "../../../box/Box.js";
import a from "../../../toggle-group/ToggleGroup.js";
import i from "../../../tooltip/Tooltip.js";
import { ToggleGroupItem as l } from "../../../toggle-group/TogglePrimitive.js";
import R from "../html-editor-typography-action/HtmlEditorTypographyAction.js";
import D from "../html-editor-font-size-action/HtmlEditorFontSizeAction.js";
import j from "../html-editor-text-alignment-action/HtmlEditorTextAlignmentAction.js";
import q from "../html-editor-text-color-action/HtmlEditorTextColorAction.js";
import w from "../html-editor-link-action/HtmlEditorLinkAction.js";
import B from "../html-editor-table-action/HtmlEditorTableAction.js";
import G from "../html-editor-image-action/HtmlEditorImageAction.js";
import K from "../html-editor-video-action/HtmlEditorVideoAction.js";
import L from "../html-editor-search-action/HtmlEditorSearchAction.js";
import W from "../html-editor-replace-action/HtmlEditorReplaceAction.js";
const Z = ({
  mode: C,
  onModeChange: u,
  activeActions: s,
  onToolbarAction: e,
  selectedStyle: v,
  selectedFontSize: b,
  selectedTextColor: y,
  selectedBgColor: A,
  colorPalette: E,
  selectedAlignment: F,
  selectedLink: c,
  selectedText: H,
  selectedImage: k,
  selectedVideo: x,
  imagePopoverOpen: S,
  onImagePopoverClose: d,
  searchTerm: h,
  searchResults: m,
  searchResultIndex: p
}) => {
  const r = g(
    (o) => {
      const f = o.currentTarget.dataset.action;
      f && e(f);
    },
    [e]
  ), z = g(
    (o) => {
      u(o);
    },
    [u]
  ), N = s.filter((o) => T.includes(o)), V = s.filter((o) => U.includes(o));
  return /* @__PURE__ */ n(O, { role: "toolbar", "aria-label": "Formatierung", className: "flex flex-wrap items-center gap-[var(--spacing-2)] bg-[var(--base-background)] w-fit", children: [
    /* @__PURE__ */ n(a, { type: "single", value: C, onChange: z, shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(i, { content: "Visuell", asChild: !0, children: /* @__PURE__ */ t(l, { value: "visual", icon: "Eye", label: "Visuell", "aria-label": "Visuell" }) }),
      /* @__PURE__ */ t(i, { content: "Code", asChild: !0, children: /* @__PURE__ */ t(l, { value: "code", icon: "CodeXml", label: "Code", "aria-label": "Code" }) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(i, { content: "Rückgängig", asChild: !0, children: /* @__PURE__ */ t(l, { value: "undo", icon: "Undo", "aria-label": "Rückgängig", "data-action": "undo", onClick: r }) }),
      /* @__PURE__ */ t(i, { content: "Wiederholen", asChild: !0, children: /* @__PURE__ */ t(l, { value: "redo", icon: "Redo", "aria-label": "Wiederholen", "data-action": "redo", onClick: r }) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(R, { onAction: e, selectedStyle: v }),
      /* @__PURE__ */ t(D, { onAction: e, selectedFontSize: b }),
      /* @__PURE__ */ t(j, { onAction: e, selectedAlignment: F }),
      /* @__PURE__ */ t(
        q,
        {
          onAction: e,
          selectedTextColor: y,
          selectedBgColor: A,
          colorPalette: E
        }
      )
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", value: N, shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(i, { content: "Fett", asChild: !0, children: /* @__PURE__ */ t(l, { value: "bold", icon: "Bold", "aria-label": "Fett", "data-action": "bold", onClick: r }) }),
      /* @__PURE__ */ t(i, { content: "Kursiv", asChild: !0, children: /* @__PURE__ */ t(l, { value: "italic", icon: "Italic", "aria-label": "Kursiv", "data-action": "italic", onClick: r }) }),
      /* @__PURE__ */ t(i, { content: "Unterstrichen", asChild: !0, children: /* @__PURE__ */ t(l, { value: "underline", icon: "Underline", "aria-label": "Unterstrichen", "data-action": "underline", onClick: r }) }),
      /* @__PURE__ */ t(i, { content: "Durchgestrichen", asChild: !0, children: /* @__PURE__ */ t(
        l,
        {
          value: "strikethrough",
          icon: "Strikethrough",
          "aria-label": "Durchgestrichen",
          "data-action": "strikethrough",
          onClick: r
        }
      ) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", value: V, shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(i, { content: "Aufzählungsliste", asChild: !0, children: /* @__PURE__ */ t(l, { value: "bulletList", icon: "List", "aria-label": "Aufzählungsliste", "data-action": "bulletList", onClick: r }) }),
      /* @__PURE__ */ t(i, { content: "Nummerierte Liste", asChild: !0, children: /* @__PURE__ */ t(
        l,
        {
          value: "numberedList",
          icon: "ListOrdered",
          "aria-label": "Nummerierte Liste",
          "data-action": "numberedList",
          onClick: r
        }
      ) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(w, { onAction: e, selectedUrl: c == null ? void 0 : c.url, selectedText: (c == null ? void 0 : c.text) ?? H }),
      /* @__PURE__ */ t(i, { content: "Trennlinie", asChild: !0, children: /* @__PURE__ */ t(
        l,
        {
          value: "horizontalRule",
          icon: "SeparatorHorizontal",
          "aria-label": "Trennlinie",
          "data-action": "horizontalRule",
          onClick: r
        }
      ) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(B, { onAction: e }),
      /* @__PURE__ */ t(i, { content: "Zitat", asChild: !0, children: /* @__PURE__ */ t(l, { value: "blockquote", icon: "Quote", "aria-label": "Zitat", "data-action": "blockquote", onClick: r }) })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(
        G,
        {
          onAction: e,
          selectedImage: k,
          open: S,
          onOpenChange: (o) => !o && (d == null ? void 0 : d())
        }
      ),
      /* @__PURE__ */ t(K, { onAction: e, selectedVideo: x })
    ] }),
    /* @__PURE__ */ n(a, { type: "multiple", shape: "rounded", rovingFocus: !1, children: [
      /* @__PURE__ */ t(
        L,
        {
          onAction: e,
          searchTerm: h,
          searchResults: m,
          searchResultIndex: p
        }
      ),
      /* @__PURE__ */ t(
        W,
        {
          onAction: e,
          searchTerm: h,
          searchResults: m,
          searchResultIndex: p
        }
      )
    ] })
  ] });
};
Z.displayName = "HtmlEditorToolbar";
export {
  Z as default
};
//# sourceMappingURL=HtmlEditorToolbar.js.map
