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