import { SidePanelModal } from './SidePanelModal';
import React, { useEffect, useMemo, useState, } from 'react';
import { createPortal } from 'react-dom';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { addResizeObserver } from '@wix/bex-core';
export function WixPatternsModalsContainer(props) {
    const { state, rootRef, anchorRef, zIndex = 1 } = props;
    const { appendModalsToBody, lodash, useRelativeSidePanel } = useWixPatternsContainer();
    const [render, setRender] = useState({});
    useEffect(() => {
        const { container, top } = appendModalsToBody
            ? {
                container: document.body,
                top: 0,
            }
            : {
                container: rootRef?.current ?? document.body,
                top: null,
            };
        const setTop = lodash.throttle(() => {
            const id = window.requestAnimationFrame(() => {
                setRender({
                    top: top != null ? top : container.getBoundingClientRect().top,
                    left: container.getBoundingClientRect().right,
                    anchor: anchorRef?.current ?? container,
                });
            });
            disposers.push(() => window.cancelAnimationFrame(id));
        }, 300);
        const disposers = [addResizeObserver(container, setTop)];
        setTop();
        return () => {
            setTop.cancel();
            disposers.forEach((d) => d?.());
        };
    }, []);
    // creates a new stacking context
    const modalsContainerStyle = useMemo(() => ({
        position: 'relative',
        zIndex,
    }), [zIndex]);
    let child = render.top != null && (React.createElement(SidePanelModal, { state: state, top: useRelativeSidePanel ? 0 : render.top, left: render.left }));
    if (!useRelativeSidePanel) {
        child = (React.createElement("div", { style: modalsContainerStyle, "data-hook": "cairo-modals-container" }, child));
    }
    if (render.anchor == null) {
        return null;
    }
    child = createPortal(child, render.anchor);
    return child;
}
//# sourceMappingURL=WixPatternsModalsContainer.js.map