import { jsx as o, jsxs as x } from "react/jsx-runtime";
import { useRef as $, useLayoutEffect as ee, useEffect as P, Children as U, isValidElement as ne, cloneElement as te } from "react";
import { useTheme as oe, ClickAwayListener as re } from "@mui/material";
import E from "clsx";
import { Menu as ie, MoreHoriz as ae, ArrowForward as le, ExpandMore as se } from "@mui/icons-material";
import { useCreation as S, useReactive as ce, useMemoizedFn as z, useSize as ue, useThrottleFn as de } from "ahooks";
import me from "lodash/noop";
import { NavMenuProvider as fe, useNavMenuContext as V } from "./nav-menu-context.js";
import { NavMenuStyled as ve, NavMenuRoot as pe, NavMenuItem as he, NavMenuSub as Ce, NavMenuSubList as Ne } from "./style.js";
import { SubContainer as Ie } from "./sub-container.js";
import "../Theme/theme.js";
import "../Theme/theme-provider.js";
function B(i) {
  return i ? U.toArray(i).filter((r) => ne(r) ? r.type === W || r.type === L : !1) : null;
}
function D(i) {
  return $(i || `navmenu-item-id-${Math.random().toString(36).slice(2)}`).current;
}
function G({
  items: i = [],
  mode: r = "horizontal",
  children: p = null,
  activeId: s = null,
  // eslint-disable-next-line react/require-default-props
  textColor: _,
  // eslint-disable-next-line react/require-default-props
  activeTextColor: M,
  // eslint-disable-next-line react/require-default-props
  bgColor: b,
  onSelected: u = void 0,
  ...d
}) {
  const t = oe(), m = S(() => t.palette.text.secondary, [t]), y = S(() => t.palette.text.primary, [t]), c = S(() => t.palette.background.default, [t]), h = B(p);
  if (!i?.length && !h?.length)
    throw new Error("One of 'items' or 'children' is required by NavMenu component.");
  const n = ce({
    activeId: s,
    openedIds: [],
    hiddenItemCount: 0
  }), C = z((e) => {
    n.activeId = e, u?.(e);
  }), N = z((e) => {
    n.openedIds.push(e);
  }), T = z((e) => {
    n.openedIds = n.openedIds.filter((a) => a !== e);
  }), R = S(() => ({
    ...n,
    mode: r,
    textColor: m,
    activeTextColor: y,
    bgColor: c,
    activate: C,
    open: N,
    close: T
  }), [
    n.activeId,
    n.hiddenItemCount,
    n.openedIds,
    r,
    m,
    y,
    c,
    C,
    N,
    T
  ]), g = $(null), f = $([]), w = $(null), j = $(0), A = n.hiddenItemCount === f.current?.length, J = A ? { marginLeft: "0px" } : void 0, K = S(() => A ? /* @__PURE__ */ o(ie, {}) : /* @__PURE__ */ o(ae, {}), [A]), Q = (e) => U.map(e, (a, v) => te(a, {
    ref: (I) => {
      f.current[v] = I;
    }
  })), q = ue(g.current), { run: k } = de(
    z(() => {
      let e = 0, a = 0, v = !1;
      const I = w.current ? w.current.offsetWidth + parseFloat(window.getComputedStyle(w.current).marginLeft) : 0;
      f.current.forEach((l, H) => {
        if (l) {
          l.style.display = "flex";
          const Z = H > 0 ? parseFloat(window.getComputedStyle(l).marginLeft) : 0, O = l.offsetWidth + Z;
          j.current - I >= e + O && !v ? e += O : (l.style.display = "none", v = !0, a++);
        }
      }), a !== n.hiddenItemCount && (n.hiddenItemCount = a);
    }),
    { wait: 100 }
  );
  ee(() => {
    j.current = q?.width || g.current?.clientWidth || 0, r === "horizontal" && k();
  }, [q?.width, r]), P(() => {
    if (r === "horizontal")
      return k(), window.addEventListener("resize", k), () => {
        window.removeEventListener("resize", k);
      };
  }, [r, i]), P(() => {
    s != null && (n.activeId = s);
  }, [s]);
  const X = E("navmenu", `navmenu--${r}`, d.className), F = (e, a, v = 0) => {
    const I = v === 0;
    return e?.children ? v > 0 ? null : /* @__PURE__ */ o(
      L,
      {
        id: e.id,
        icon: e.icon,
        label: e.label,
        variant: I ? "default" : "panel",
        ref: I ? (l) => {
          f.current[a] = l;
        } : void 0,
        children: typeof e.children == "function" ? e.children : e.children.map(
          (l, H) => F({ ...l, variant: "panel" }, H, v + 1)
        )
      },
      e.id
    ) : /* @__PURE__ */ o(
      W,
      {
        id: e.id,
        icon: e.icon,
        label: e.label,
        description: e.description,
        active: e.active,
        variant: e.variant,
        ref: I ? (l) => {
          f.current[a] = l;
        } : void 0
      },
      e.id
    );
  }, Y = i ? i?.slice(-n.hiddenItemCount).map((e, a) => F(e, a, 1)) : h?.slice(-n.hiddenItemCount);
  return /* @__PURE__ */ o(fe, { value: R, children: /* @__PURE__ */ o(ve, { ...d, className: X, $textColor: m, $bgColor: c, children: /* @__PURE__ */ x(pe, { className: E("navmenu-root", `navmenu-root--${r}`), ref: g, children: [
    i ? i.map((e, a) => F(e, a)) : Q(h || []),
    n.hiddenItemCount > 0 && /* @__PURE__ */ o(L, { expandIcon: !1, icon: K, label: "", ref: w, style: J, children: Y })
  ] }) }) });
}
function W({
  ref: i = void 0,
  id: r = "",
  icon: p = null,
  label: s = "",
  description: _ = void 0,
  active: M = !1,
  variant: b = "default",
  onClick: u = me,
  ...d
}) {
  const t = D(r), { mode: m, activeId: y, activate: c, activeTextColor: h } = V(), n = E(
    "navmenu-item",
    { "navmenu-item--active": y === t },
    `navmenu-item--${m}`,
    `navmenu-item--${b}`,
    d.className
  );
  return P(() => {
    M && c?.(t);
  }, [M]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
  /* @__PURE__ */ x(
    he,
    {
      ...d,
      className: n,
      ref: i,
      $activeTextColor: h,
      onClick: () => {
        u?.(), c?.(t);
      },
      children: [
        p && /* @__PURE__ */ o("span", { className: "navmenu-item__icon", children: p }),
        /* @__PURE__ */ x("div", { className: "navmenu-item__content", children: [
          /* @__PURE__ */ x("span", { className: "navmenu-item__label", children: [
            s,
            " ",
            /* @__PURE__ */ o(le, { className: "navmenu-item__label-arrow" })
          ] }),
          _ && /* @__PURE__ */ o("span", { className: "navmenu-item__desc", children: _ })
        ] })
      ]
    }
  );
}
W.displayName = "NavMenu.Item";
function L({
  ref: i = void 0,
  id: r = "",
  icon: p = null,
  label: s = null,
  description: _,
  variant: M = "default",
  children: b = void 0,
  expandIcon: u = ({ isOpen: t }) => /* @__PURE__ */ o(
    se,
    {
      style: {
        transform: `rotate(${t ? 180 : 0}deg)`
      }
    }
  ),
  ...d
}) {
  const t = D(r), { openedIds: m, open: y, close: c, mode: h, activeTextColor: n } = V(), C = m?.includes(t) ?? !1, N = h === "inline", T = E(
    "navmenu-sub",
    "navmenu-item",
    { "navmenu-item--panel": M === "panel" },
    { "navmenu-sub--opened": C, "navmenu-item--inline": N },
    d.className
  ), R = {
    onClick: () => {
      m?.includes(t) ? c?.(t) : y?.(t);
    }
  }, g = N ? { onClick: (w) => w.stopPropagation() } : {}, f = /* @__PURE__ */ x(
    Ce,
    {
      ...d,
      className: T,
      ...R,
      ref: i,
      $activeTextColor: n,
      children: [
        p && /* @__PURE__ */ o("span", { className: "navmenu-item__icon", children: p }),
        /* @__PURE__ */ x("div", { className: "navmenu-item__content", children: [
          /* @__PURE__ */ o("span", { className: "navmenu-item__label", children: s }),
          _ && /* @__PURE__ */ o("span", { className: "navmenu-item__desc", children: _ })
        ] }),
        u && /* @__PURE__ */ o("span", { className: "navmenu-sub__expand-icon", children: typeof u == "function" ? u({ isOpen: C }) : u }),
        /* @__PURE__ */ o(Ie, { inline: N, ...g, children: typeof b == "function" ? b({ isOpen: C }) : /* @__PURE__ */ o(Ne, { className: "navmenu-sub__list", children: B(b) }) })
      ]
    }
  );
  return N ? f : /* @__PURE__ */ o(re, { onClickAway: () => c?.(t), children: f });
}
L.displayName = "NavMenu.Sub";
G.Item = W;
G.Sub = L;
export {
  W as Item,
  L as Sub,
  G as default
};
