import { jsx as n, Fragment as b } from "@emotion/react/jsx-runtime";
import { shallow as s } from "zustand/shallow";
import { Window as N } from "../Window/Window.js";
import { useAreasStore as a } from "../../../../../../hooks/useAreas/index.js";
import { areasViewerClasses as l } from "../../../../classes/index.js";
import D from "clsx";
import { PADDING_GRIDLAYOUT as g, MARGIN_GRIDLAYOUT as p, RESPONSIVE_ROW_HEIGHTS as E } from "../../../../../../contexts/AreasContext/helpers/helper.js";
import { MemonizePopupsViewer as M } from "../../../../../../../popups/components/PopupsViewer/PopupsViewer.js";
import { useState as O, useMemo as P } from "react";
import { dragResizeWindowRNDClasses as t } from "../../../../../../../DragResizeWindowRND/classes/index.js";
import { useTheme as T } from "@mui/material";
import { useComponentSize as _ } from "../../../../../../../../hooks/useComponentSize/index.js";
import { withSizeProvider as V } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index.js";
import { Responsive as k } from "../../../../../../../GridLayout/subcomponents/Responsive/index.js";
const $ = V(k), re = (u) => {
  const { areaId: o, size: f } = u, h = a((e) => e.hashAreas[o].layoutItemsIds, s), I = a((e) => e.hashAreas[o].layouts, s), S = a((e) => e.hashAreas[o].breakpoints, s), y = a((e) => e.hashAreas[o].maximizedId, s), z = a((e) => e.hashAreas[o].cols, s), { onBreakpointsLayoutsChange: L, onContainerChange: C } = a(
    (e) => e.areaActions,
    s
  ), c = T(), { currentSize: d } = _(f), [r, R] = O(void 0), A = () => {
    r && r.classList.add(t.resizing);
  }, H = () => {
    r && r.classList.remove(t.resizing);
  }, G = () => {
    r && r.classList.add(t.dragging);
  }, w = () => {
    r && r.classList.remove(t.dragging);
  }, x = (e) => {
    e && e !== r && R(e);
  }, v = P(() => {
    const e = c?.size?.[c?.generalSettings?.isMobile ? "mobile" : "desktop"]?.[d]?.container, m = parseInt(e), i = isNaN(m) ? 32 : m;
    return {
      xxs: i,
      xs: i,
      sm: i,
      md: i,
      lg: i
    };
  }, [c, d]);
  return /* @__PURE__ */ n(
    $,
    {
      ref: x,
      autoSize: !1,
      compactType: "vertical",
      measureBeforeMount: !0,
      resizeHandles: ["nw", "se"],
      className: D(
        l.areaGridLayout,
        `${l.areaGridLayout}-${o}`
      ),
      layouts: I,
      onLayoutChange: (e, m) => L(o, e, m),
      draggableHandle: `.${t.draggableHandle}`,
      draggableCancel: `.${t.draggableCancel}`,
      layoutItemRender: (e) => h.indexOf(e.i) === -1 ? /* @__PURE__ */ n(b, {}) : e.type === "placeholder" ? /* @__PURE__ */ n("div", {}) : /* @__PURE__ */ n(N, { windowId: e.i, areaId: o }),
      breakpoints: S,
      colapsedHeight: v,
      rowHeight: E,
      cols: z,
      containerMargin: [p, p],
      containerPadding: [g, g],
      onContainerChange: (e) => {
        C(o, e);
      },
      preventCollision: !1,
      maximizeId: y,
      children: /* @__PURE__ */ n(
        M,
        {
          groupId: o,
          containerElement: r,
          onResizeStart: A,
          onResizeStop: H,
          onDragStart: G,
          onDragStop: w
        }
      )
    }
  );
};
export {
  re as AreaGridLayout
};
