import { jsx as t, jsxs as b, Fragment as T } from "@emotion/react/jsx-runtime";
import x from "clsx";
import { TabNavigatorContainerStyled as I, TabNavigatorPositionedContainerStyled as O, TabNavigatorIconContainerStyled as P, TabNavigatorIconStyled as k, PopoverStyled as E, ContentPopoverStyled as _ } from "../../slots/TabsNavigatorSlots.js";
import { useState as w, useRef as A, useMemo as g } from "react";
import { TabNavigatorComponent as D } from "../TabNavigatorComponent/TabNavigatorComponent.js";
import { useEnvironment as M } from "@m4l/core";
import { useComponentSize as R } from "../../../../hooks/useComponentSize/index.js";
import { TABS_NAVIGATOR_CLASSES as o } from "../../constants.js";
import { useTheme as $ } from "@mui/material/styles";
import { TextMarquee as j } from "../TextMarquee/TextMarquee.js";
const U = (f) => {
  const { label: u, icon: C, children: a, selectedId: c, onChangeSelectedId: d, variant: r, maxColumnsPopover: p = 3 } = f, [n, i] = w(!1), v = A(null), { host_static_assets: S, environment_assets: N } = M(), { currentSize: m } = R(), s = a.some((e) => e.id === c), l = g(() => ({
    selected: s,
    variant: r,
    size: m,
    maxColumnsPopover: p,
    totalTabs: a.length
  }), [s, r, m, p, a.length]), h = $(), y = (e) => {
    (e.key === "Enter" || e.key === " ") && i(!n);
  }, z = g(() => a.map((e) => /* @__PURE__ */ t(
    D,
    {
      ...e,
      type: "cluster",
      selectedId: c,
      onChangeSelectedId: d,
      onClick: () => {
        e.onClick?.(), i(!1);
      }
    },
    e.id
  )), [a, c, d]);
  return /* @__PURE__ */ b(T, { children: [
    /* @__PURE__ */ t(
      I,
      {
        tabIndex: 0,
        "aria-selected": s,
        role: "button",
        "aria-label": "cluster tabs",
        "aria-expanded": n,
        "aria-haspopup": "menu",
        className: o.tabNavigatorContainer,
        onClick: () => i(!n),
        onKeyDown: y,
        ownerState: l,
        children: /* @__PURE__ */ b(
          O,
          {
            className: x(
              o.tabNavigatorPositionedContainer,
              o.normal
            ),
            children: [
              /* @__PURE__ */ t(P, { ref: v, className: o.tabNavigatorIconContainer, ownerState: l, children: /* @__PURE__ */ t(k, { className: o.tabNavigatorIcon, src: `${S}/${N}/${C}`, ownerState: l }) }),
              /* @__PURE__ */ t(
                j,
                {
                  speed: 3,
                  variant: s ? "bodyDens" : "bodyStandard",
                  size: m,
                  children: u
                }
              )
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ t(
      E,
      {
        open: n,
        onClose: () => i(!1),
        anchorEl: v.current,
        sx: {
          ml: r === "vertical" ? h.vars.size.baseSpacings.sp6 : 0,
          mb: r === "horizontal" ? h.vars.size.baseSpacings.sp6 : 0
        },
        ...r === "vertical" ? {
          anchorOrigin: {
            vertical: "center",
            horizontal: "right"
          },
          transformOrigin: {
            vertical: "center",
            horizontal: "left"
          }
        } : {
          anchorOrigin: {
            vertical: "top",
            horizontal: "center"
          },
          transformOrigin: {
            vertical: "bottom",
            horizontal: "center"
          }
        },
        children: /* @__PURE__ */ t(_, { variant: "flex-wrap", className: o.contentPopover, ownerState: l, children: z })
      }
    )
  ] });
};
export {
  U as TabNavigatorClusterComponent
};
