import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { useState as l, useRef as x, useEffect as v } from "react";
import { isEmpty as j } from "es-toolkit/compat";
import A from "../../utils/classNames.js";
import D from "../../hooks/useEffectOnce.js";
import G from "../../hooks/useSearchHighlight.js";
import V from "../clearableInput/ClearableInput.js";
import $ from "../expander/ExpanderPanel.js";
import q from "./ListMenuGroup.js";
import X from "../../hooks/useEsc.js";
import Z from "../../hooks/useWindowResize.js";
import J from "../../hooks/useKey.js";
import { debounce as Q } from "es-toolkit/function";
const U = 10, Y = 580, ee = (r, s, o) => r.map((n) => ({
  ...n,
  navItems: n.navItems.filter(
    (c) => c[o].toLowerCase().includes(s.toLowerCase())
  )
})), te = (r) => r.find(({ navItems: s }) => !j(s)), he = (r) => {
  const {
    menuItems: s,
    focusFilter: o = !1,
    enableFilter: n = !1,
    filterPlaceholder: c,
    onFilterChange: h = () => {
    },
    notFoundMessage: L,
    className: w = "",
    groupClassName: F = "",
    responsive: g = !0,
    autoClose: k = !0,
    filterKey: H = "key",
    trailingInputAddon: y,
    filterFn: O,
    ...R
  } = r, [i, M] = l(""), [T, S] = l(!1), [N, E] = l(!1), [K, z] = l(""), m = x(null), a = x(null), I = () => {
    if (g && a.current) {
      const [e] = a.current.getElementsByClassName("active");
      z(
        /* @__PURE__ */ f("div", { className: "display-flex align-items-center", children: [
          /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-menu-hamburger margin-right-10" }),
          /* @__PURE__ */ t("span", { children: e?.innerText })
        ] })
      );
    }
  };
  X(() => {
    n && m.current === document.activeElement && (M(""), h(""));
  });
  const C = Q(() => {
    I(), S(window.innerWidth < Y);
  }, U);
  v(C, []), Z(C);
  const d = () => {
    m.current?.focus();
  };
  J((e) => {
    (e.metaKey || e.ctrlKey) && e.key === "k" && (e.preventDefault(), d());
  }), D(() => {
    o && d();
  }), v(I, [s]);
  const B = () => o && d(), P = (e) => {
    M(e), h(e);
  }, p = n ? (O ?? ee)(s, i, H) : s;
  G({
    ref: a,
    query: n ? i : "",
    deps: [p]
  });
  const W = (e) => {
    const u = e.target.parentElement?.tagName.toLowerCase() === "li";
    k && u && E(!1);
  }, _ = A(
    "form-group",
    "margin-bottom-5",
    "padding-left-15",
    "padding-right-15",
    "padding-bottom-15",
    "position-sticky",
    "top-0",
    "z-index-1"
  ), b = /* @__PURE__ */ f("div", { ...R, className: `ListMenu ${w} ${i ? "filtered" : ""}`, ref: a, children: [
    n && /* @__PURE__ */ t("div", { className: _, children: /* @__PURE__ */ f("div", { className: "input-group width-100pct", children: [
      /* @__PURE__ */ t("span", { className: "input-group-addon", children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-search", "aria-hidden": "true" }) }),
      /* @__PURE__ */ t(
        V,
        {
          value: i,
          inputRef: m,
          placeholder: c,
          onChange: P,
          onClear: B
        }
      ),
      y && y
    ] }) }),
    !te(p) && /* @__PURE__ */ t("div", { className: "padding-top-25 text-center text-color-gray", children: L }),
    p.map((e, u) => /* @__PURE__ */ t(q, { className: F, menuGroup: e }, u))
  ] });
  return g && T ? /* @__PURE__ */ t(
    $,
    {
      title: K,
      bsStyle: "default",
      open: N,
      onToggle: () => E(!N),
      unmountOnExit: !1,
      className: "shadow-default",
      children: /* @__PURE__ */ t("div", { onClick: W, children: b })
    }
  ) : b;
};
export {
  he as default
};
//# sourceMappingURL=ListMenu.js.map
