import { jsxs as u, jsx as n, Fragment as _ } from "@emotion/react/jsx-runtime";
import { useState as y } from "react";
import { Tooltip as C } from "@m4l/base";
import { MenuMoreHorizontalOutlined as T, LayoutExpandOutlined as D } from "@m4l/icons";
import { AREAS_ADMIN_KEY_COMPONENT as z, AREAS_ADMIN_TOOLTIP_DELAY_PROPS as w, AREAS_MENU_MAX_VISIBLE_ITEMS as P } from "../../constants.js";
import { ContainerModulesRootStyled as N, ContainerModulesItemsStyled as B, ModuleIconButtonStyled as H, AreasSectionDividerStyled as L, ContainerModulesOverflowButtonStyled as R, ContainerModulesMenuContentStyled as k, ContainerModulesMenuHeaderStyled as U, ContainerModulesMenuHeaderTitleStyled as V, ContainerModulesMenuHeaderCountStyled as j, AreasMenuScrollAreaStyled as F, AreasMenuListStyled as W, ContainerModulesMenuEndAdornmentStyled as Y } from "../../slots/AreasAdminSlots.js";
import { getComponentClasses as $ } from "../../../../../../utils/getComponentSlotRoot.js";
import { AreasAdminSlots as K } from "../../slots/AreasAdminEnum.js";
import { Popover as X } from "../../../../../extended/mui/Popover/Popover.js";
import { MenuItem as q } from "../../../../../extended/mui/MenuItem/MenuItem.js";
function G(r, o, d) {
  const s = d ? r.findIndex((i) => i.id === d) : -1;
  if (s < 0 || s < o)
    return {
      overflowItems: r.slice(o),
      visibleItems: r.slice(0, o)
    };
  const t = r.filter((i) => i.id !== d), c = r[s];
  return t.splice(Math.max(o - 1, 0), 0, c), {
    overflowItems: t.slice(o),
    visibleItems: t.slice(0, o)
  };
}
function ae(r) {
  const {
    items: o,
    itemLimit: d,
    menuHeaderLabel: s,
    orientation: t,
    overflowLabel: c,
    onSelect: i,
    selectedItemId: M,
    size: l
  } = r, [f, h] = y(null), [v, m] = y(null), E = $(z, K);
  if (o.length === 0)
    return null;
  const { visibleItems: O, overflowItems: x } = G(o, d, M), p = !!f;
  function b(e) {
    e.stopPropagation(), h(e.currentTarget);
  }
  function A() {
    f?.blur(), h(null);
  }
  function g(e) {
    i(e), A();
  }
  function S(e) {
    m(e);
  }
  function I(e) {
    m((a) => a === e ? null : a);
  }
  return /* @__PURE__ */ u(N, { ownerState: { orientation: t }, children: [
    /* @__PURE__ */ n(B, { ownerState: { orientation: t }, children: O.map((e) => {
      const a = M === e.id;
      return /* @__PURE__ */ n(
        C,
        {
          ...w,
          title: e.title,
          children: /* @__PURE__ */ n(
            H,
            {
              "aria-label": e.title,
              "aria-pressed": a,
              color: a ? "primary" : "default",
              "data-testid": `AreasAdminModule-${e.id}`,
              onClick: () => i(e.id),
              size: l,
              src: e.iconUrl,
              variant: a ? "contained" : "text"
            }
          )
        },
        e.id
      );
    }) }),
    x.length > 0 ? /* @__PURE__ */ u(_, { children: [
      t === "vertical" ? /* @__PURE__ */ n(
        L,
        {
          customVariant: "solid",
          "data-testid": "AreasAdminModulesDivider",
          orientation: "horizontal",
          size: l,
          className: E.sectionDivider
        }
      ) : null,
      /* @__PURE__ */ n(
        C,
        {
          ...w,
          title: c,
          children: /* @__PURE__ */ n(
            R,
            {
              "aria-label": c,
              color: p ? "primary" : "default",
              icon: /* @__PURE__ */ n(T, {}),
              onClick: b,
              selected: p,
              size: l,
              variant: "text"
            }
          )
        }
      ),
      /* @__PURE__ */ n(
        X,
        {
          anchorEl: f,
          anchorOrigin: t === "vertical" ? { horizontal: "right", vertical: "center" } : { horizontal: "right", vertical: "bottom" },
          arrowType: "no-arrow",
          onClose: A,
          open: p,
          slotProps: {
            paper: {
              sx: {
                width: 220,
                maxWidth: 220,
                minWidth: 220,
                ...t === "vertical" ? { ml: 1.5 } : { mt: 1 }
              }
            }
          },
          transformOrigin: t === "vertical" ? { horizontal: "left", vertical: "center" } : { horizontal: "right", vertical: "top" },
          children: /* @__PURE__ */ u(k, { children: [
            /* @__PURE__ */ u(U, { children: [
              /* @__PURE__ */ n(V, { variant: "bodyDens", children: s }),
              /* @__PURE__ */ n(
                j,
                {
                  color: "default",
                  dataTestId: "AreasAdminModulesCount",
                  label: String(o.length),
                  size: l,
                  variant: "contained"
                }
              )
            ] }),
            /* @__PURE__ */ n(
              F,
              {
                ownerState: { maxVisibleItems: P, size: l },
                children: /* @__PURE__ */ n(W, { children: o.map((e) => /* @__PURE__ */ n(
                  q,
                  {
                    endAdornment: /* @__PURE__ */ n(
                      Y,
                      {
                        "aria-hidden": "true",
                        color: "default",
                        component: "span",
                        dataTestId: `AreasAdminModuleExpand-${e.id}`,
                        icon: /* @__PURE__ */ n(D, {}),
                        role: "presentation",
                        size: l,
                        style: {
                          flexShrink: 0,
                          marginLeft: "auto",
                          opacity: v === e.id ? 1 : 0,
                          pointerEvents: v === e.id ? "auto" : "none",
                          transition: "opacity 0.2s ease"
                        },
                        tabIndex: -1,
                        variant: "text"
                      }
                    ),
                    label: e.label,
                    onBlur: () => I(e.id),
                    onClick: () => g(e.id),
                    onFocus: () => S(e.id),
                    onMouseEnter: () => S(e.id),
                    onMouseLeave: () => I(e.id),
                    selected: M === e.id,
                    size: l,
                    startAdornment: e.iconUrl
                  },
                  e.id
                )) })
              }
            )
          ] })
        }
      )
    ] }) : null
  ] });
}
export {
  ae as ContainerModules
};
