import { jsx as i } from "react/jsx-runtime";
import { useState as m, useRef as b, useEffect as L, useLayoutEffect as V } from "react";
import { isEmpty as j } from "es-toolkit/compat";
import q from "../../utils/classNames.js";
import z from "../../hooks/useClickOutside.js";
import B from "./CollapsedNavItem.js";
const $ = 50, F = 15, Q = (C) => {
  const { navItems: n = [], actionBarItems: d = [], containerWidth: k } = C, [o, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
  L(() => {
    t.current = !0;
  }, [n, d, k]), V(() => {
    t.current && E();
  });
  const D = (e) => e.scrollWidth - $ - F, E = () => {
    const e = f.current;
    if (!e)
      return;
    const s = [...e.children || []], v = D(e);
    if (v < 0)
      return;
    let r = 0;
    const I = [], N = [];
    s.forEach((l) => {
      if (!l.className)
        return;
      r = r + l.scrollWidth;
      const c = n.find((A) => {
        const h = l.attributes.getNamedItem("data-nav-item-key");
        return h && A.key === h.value;
      });
      c && (v > r ? I.push(c) : N.push(c));
    }), t.current = !1, g(I), W(N);
  }, O = () => {
    a(!o);
  }, S = () => {
    o && a(!1);
  }, p = (e, s) => /* @__PURE__ */ i(
    "li",
    {
      className: `submodule ${s ? "offscreen" : ""}`,
      "data-nav-item-key": e.key,
      children: e.route
    },
    e.key
  ), x = () => !t.current && !j(u) ? [
    ...y.map((s) => p(s, t.current)),
    /* @__PURE__ */ i(
      B,
      {
        ref: w,
        show: o,
        navItems: u,
        actionBarItems: d,
        onDropdownClick: O,
        onItemClick: S
      },
      "CollapsedNavItem"
    )
  ] : n.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
  return /* @__PURE__ */ i("ul", { className: R, ref: f, children: x() });
};
export {
  Q as NavItems,
  Q as default
};
//# sourceMappingURL=NavItems.js.map
