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