import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { useState as n, useEffect as o, useCallback as t } from "react";
import F from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import s from "../../../box/Box.js";
import g from "../../../label/Label.js";
import x from "../../../input/Input.js";
import K from "../../../text/Text.js";
import m from "../../../button/Button.js";
const j = ({
  children: v,
  onAction: e,
  searchTerm: h = "",
  searchResults: l = 0,
  searchResultIndex: b = 0
}) => {
  const [d, i] = n(h), [C, u] = n("");
  o(() => {
    i(h);
  }, [h]);
  const y = t(
    (a) => {
      i(a), e == null || e("setSearchTerm", { term: a });
    },
    [e]
  ), N = t(
    (a) => {
      u(a), e == null || e("setReplaceTerm", { term: a });
    },
    [e]
  ), S = t(() => {
    e == null || e("previousSearchResult");
  }, [e]), c = t(() => {
    e == null || e("nextSearchResult");
  }, [e]), f = t(() => {
    e == null || e("replace");
  }, [e]), T = t(() => {
    e == null || e("replaceAll"), i(""), u("");
  }, [e]), E = t(
    (a) => {
      a || e == null || e("setSearchTerm", { term: "" });
    },
    [e]
  ), k = t(
    (a) => {
      a.key === "Enter" && l > 0 && (a.preventDefault(), c());
    },
    [c, l]
  ), z = t(
    (a) => {
      a.key === "Enter" && l > 0 && d.trim() && (a.preventDefault(), f());
    },
    [f, l, d]
  ), w = l > 0 ? b + 1 : 0, D = l > 0 ? `${w} von ${l}` : "0 von 0";
  return /* @__PURE__ */ p(F, { action: "replace", icon: "Replace", ariaLabel: "Ersetzen", onOpenChange: E, children: [
    /* @__PURE__ */ p(s, { className: "w-full flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-3)]", children: [
      /* @__PURE__ */ p(s, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ r(g, { htmlFor: "replace-search-input", variant: "field", children: "Suche nach" }),
        /* @__PURE__ */ r(
          x,
          {
            id: "replace-search-input",
            type: "text",
            value: d,
            onChange: y,
            onKeyDown: k,
            placeholder: "Suchtext eingeben",
            autoComplete: "off"
          }
        )
      ] }),
      /* @__PURE__ */ p(s, { className: "flex items-center justify-between gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ r(s, { children: d && /* @__PURE__ */ r(K, { type: "muted", children: D }) }),
        /* @__PURE__ */ p(s, { className: "flex gap-[var(--spacing-1)]", children: [
          /* @__PURE__ */ r(
            m,
            {
              variant: "outline",
              size: "iconXs",
              icon: "ChevronLeft",
              "aria-label": "Vorheriges Suchergebnis",
              onClick: S,
              disabled: l === 0
            }
          ),
          /* @__PURE__ */ r(
            m,
            {
              variant: "outline",
              size: "iconXs",
              icon: "ChevronRight",
              "aria-label": "Nächstes Suchergebnis",
              onClick: c,
              disabled: l === 0
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ p(s, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ r(g, { htmlFor: "replace-input", variant: "field", children: "Ersetzen durch" }),
        /* @__PURE__ */ r(
          x,
          {
            id: "replace-input",
            type: "text",
            value: C,
            onChange: N,
            onKeyDown: z,
            placeholder: "Neuer Text",
            autoComplete: "off"
          }
        )
      ] }),
      /* @__PURE__ */ p(s, { className: "flex gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ r(
          m,
          {
            variant: "outline",
            onClick: f,
            disabled: l === 0 || !d.trim(),
            fullWidth: !0,
            label: "Ersetzen",
            "aria-label": "Aktuelle Fundstelle ersetzen"
          }
        ),
        /* @__PURE__ */ r(
          m,
          {
            variant: "default",
            onClick: T,
            disabled: l === 0 || !d.trim(),
            fullWidth: !0,
            label: "Alle ersetzen",
            "aria-label": "Alle Fundstellen ersetzen"
          }
        )
      ] })
    ] }),
    v
  ] });
};
j.displayName = "HtmlEditorReplaceAction";
export {
  j as default
};
//# sourceMappingURL=HtmlEditorReplaceAction.js.map
