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