import { jsx as e, jsxs as f, Fragment as C } from "@emotion/react/jsx-runtime";
import { useAreasStore as n } from "../../hooks/useAreas/index.js";
import { useEnvironment as L, useModuleDictionary as P } from "@m4l/core";
import j from "clsx";
import { AreaChip as Y } from "./subcomponents/AreaChip/AreaChip.js";
import { shallow as s } from "zustand/shallow";
import { ICONS as I } from "../../icons.js";
import { AreaChipMobile as B } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
import { useRef as y } from "react";
import { getAreasDictionary as z, AREAS_DICCTIONARY as w } from "../../dictionary.js";
import { AreasAdminRootStyled as F, AreasAdminContentStyled as G, AreasContainerChipIconStyled as K, AreasContainerContentChipsStyled as U, IconButtonAddAreaStyled as q, AreaContentChipStyled as H, ContainerAdminWindowsStyled as J } from "./slots/AreasAdminSlots.js";
import { useIsMobile as Q } from "@m4l/graphics";
import { useComponentSize as V } from "../../../../hooks/useComponentSize/index.js";
import { Typography as X } from "@m4l/base";
import { AREAS_ADMIN_KEY_COMPONENT as S } from "./constants.js";
import { getComponentSlotRoot as Z } from "../../../../utils/getComponentSlotRoot.js";
import { getPropDataTestId as oo } from "../../../../test/getNameDataTestId.js";
import { MenuActions as eo } from "../../../MenuActions/MenuActions.js";
import { AreasAdminSlots as ro } from "./slots/AreasAdminEnum.js";
const go = (g) => {
  const {
    color: l = "primary",
    size: _ = "medium",
    className: R,
    dataTestId: b,
    ...D
  } = g, d = Q(), { currentSize: r } = V(_), N = n((o) => o.areasIds ?? [], s), a = n((o) => o.currentAreaId, s), $ = n((o) => o.ownerState?.status), x = n((o) => o.areasIds.length), { addArea: E } = n((o) => o.areasActions, s), { maximizeLayout: O } = n((o) => o.areaActions), u = n(
    (o) => o.hashAreas[a] ? o.hashAreas[a].maximizedId : !1,
    s
  ), m = n(
    (o) => o.hashAreas[o.currentAreaId]?.layoutItemsIds?.filter((t) => o.hashWindows[t].emergeType === "layout")?.map((t) => {
      const i = o.hashWindows[t];
      return {
        i: i.windowId,
        url_icon: i.iconUrl,
        title: i.title
      };
    }) ?? [],
    s
  ), T = n((o) => m.reduce((t, i) => (t[i.i] = o.hashWindows[i.i]?.moduleCount, t), {}), s), { host_static_assets: p, environment_assets: h } = L(), { getLabel: A } = P(), v = y(null), M = y(null);
  if ($ !== "loaded")
    return null;
  const c = {
    isMobile: d,
    color: l,
    size: r
  }, k = (o) => {
    O(a, o);
  }, W = m.map((o) => {
    const t = T[o.i];
    return {
      type: "menuItem",
      onClick: () => k(o.i),
      label: `${o.title}${t ? `:${t}` : ""}`,
      urlIcon: o.url_icon,
      checkable: !0,
      checked: u === o.i
    };
  });
  return /* @__PURE__ */ e(
    F,
    {
      className: j(Z(S), R),
      ...oo(S, ro.root, b),
      role: "areas-admin-role",
      ownerState: c,
      ref: M,
      ...D,
      children: /* @__PURE__ */ e(
        G,
        {
          size: r,
          role: "presentation",
          ref: v,
          children: /* @__PURE__ */ e(
            K,
            {
              size: r,
              children: /* @__PURE__ */ e(
                U,
                {
                  size: r,
                  children: d ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ f(C, { children: [
                    /* @__PURE__ */ e(
                      q,
                      {
                        "aria-label": "Agregar área",
                        size: r,
                        variant: "contained",
                        ownerState: c,
                        src: `${p}/${h}/frontend/components/areas/assets/icons/${I.ADD_AREA}`,
                        onClick: E,
                        tooltip: A(z(w.area_add_new))
                      }
                    ),
                    /* @__PURE__ */ e(
                      H,
                      {
                        size: r,
                        children: N.map((o) => /* @__PURE__ */ e(
                          Y,
                          {
                            size: r,
                            color: l,
                            areaId: o,
                            selected: o === a,
                            disabled: x === 1
                          },
                          o
                        ))
                      }
                    ),
                    u && m.length > 1 && /* @__PURE__ */ e(C, { children: /* @__PURE__ */ f(J, { size: r, ownerState: c, children: [
                      /* @__PURE__ */ e(X, { size: r, skeletonWidth: "80px", children: A(z(w.label_window)) }),
                      /* @__PURE__ */ e(
                        eo,
                        {
                          size: r,
                          icon: `${p}/${h}/frontend/components/areas_admin/assets/icons/${I.PENDING_ORDER}`,
                          arrowType: "no-arrow",
                          anchorOrigin: { vertical: "bottom", horizontal: "right" },
                          transformOrigin: { vertical: "top", horizontal: "left" },
                          menuActions: W
                        }
                      )
                    ] }) })
                  ] })
                }
              )
            }
          )
        }
      )
    }
  );
};
export {
  go as AreasAdmin
};
