import { jsx as r } from "@emotion/react/jsx-runtime";
import { TransitionGroup as R, CSSTransition as E } from "react-transition-group";
import { shallow as p } from "zustand/shallow";
import { Popup as z } from "./subcomponents/Popup/Popup.js";
import { usePopupsStore as s } from "../PopupsProvider/hooks/usePopupsStore.js";
import { useSizeContainer as I } from "../../../../hooks/useSizeContainer/index.js";
import { RootStyled as v } from "./slots/popupsViewerSlots.js";
import { useRef as w, createRef as b, useEffect as A, memo as D } from "react";
const y = (c) => {
  const { groupId: t = "global", onResizeStart: f, onResizeStop: l, onDragStart: d, onDragStop: S, containerElement: n, className: h, loggedUser: g } = c, u = s(
    (e) => e.popupsIds.filter((m) => t === e.hashPopups[m].groupId && e.hashPopups[m].status !== "closing"),
    p
  ), o = w({});
  u.forEach((e) => {
    o.current[e] || (o.current[e] = b());
  });
  const P = s((e) => e.baseZindex, p), { removePopup: x, removeAllPopupsByGroupId: i } = s((e) => e.popupsActions, p), a = I(n);
  return A(() => () => {
    i(t);
  }, [t, i]), !n || !a ? null : /* @__PURE__ */ r(v, { ownerState: { baseZindex: P }, className: h, children: /* @__PURE__ */ r(R, { children: u.map((e) => /* @__PURE__ */ r(
    E,
    {
      timeout: { appear: 0, enter: 0, exit: 0 },
      nodeRef: o.current[e],
      unmountOnExit: !0,
      onEntered: () => {
      },
      onExited: () => {
        x(e);
      },
      classNames: {
        enter: "fade-enter",
        enterActive: "fade-enter-active",
        enterDone: "fade-enter-done"
      },
      children: /* @__PURE__ */ r(
        z,
        {
          ref: o.current[e],
          onResizeStart: f,
          onResizeStop: l,
          onDragStart: d,
          onDragStop: S,
          "data-testid": "popup",
          popupId: e,
          containerElement: n,
          containerSize: a,
          loggedUser: g
        },
        e
      )
    },
    e
  )) }) });
}, B = D(y);
export {
  B as MemonizePopupsViewer,
  y as PopupsViewer
};
