import { observer } from 'mobx-react-lite';
import { SidePanelWidth } from '@wix/bex-core';
import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
import { SlidingModal } from '../SlidingModal';
import React, { useEffect, useMemo } from 'react';
import { reaction } from 'mobx';
import { SidePanelModalItem } from './SidePanelModalItem';
function _SidePanelModal(props) {
    const { top, left, state } = props;
    const { onSidePanelOpen, closeSidePanel, isPanelLayout, useRelativeSidePanel, } = useWixPatternsContainer();
    const pageState = usePageContext();
    const { sidePanel, sidePanelComponents } = state;
    const { isOpen } = sidePanel;
    const width = useMemo(() => (isPanelLayout ? '100%' : SidePanelWidth), [isPanelLayout]);
    const style = useMemo(() => ({
        top,
        ...(useRelativeSidePanel
            ? {
                right: isPanelLayout ? undefined : 0,
            }
            : {
                left: isPanelLayout
                    ? 0
                    : left != null
                        ? left - SidePanelWidth
                        : undefined,
            }),
        bottom: 0,
        overflow: 'hidden',
        width,
    }), [top, left, width]);
    useEffect(() => {
        return reaction(() => sidePanel.isOpen, (sidePanelOpen) => {
            pageState.sidePanelOpen = sidePanelOpen;
        });
    }, []);
    useEffect(() => {
        const onGlobalSidePanelOpenSub = onSidePanelOpen?.(() => {
            state.closeSidePanel();
        });
        const disposers = [
            reaction(() => sidePanel.isOpen, (sidePanelShow) => {
                if (sidePanelShow) {
                    closeSidePanel?.();
                }
            }),
        ];
        return () => {
            onGlobalSidePanelOpenSub?.remove();
            disposers.forEach((d) => d?.());
        };
    }, []);
    return (React.createElement(SlidingModal, { dataHook: "cairo-side-panel-modal", transitionStatus: sidePanel.transition.status, style: style, appendTo: isPanelLayout || useRelativeSidePanel ? 'parent' : undefined, overlay: isPanelLayout, contentRef: (el) => {
            sidePanel.focus.modalElement = el;
        }, onExited: () => {
            sidePanel.transition.setStatus('exited');
        }, onEntered: () => {
            sidePanel.transition.setStatus('entered');
        }, onEntering: () => {
            sidePanel.transition.setStatus('entering');
        }, onExiting: () => {
            sidePanel.transition.setStatus('exiting');
        }, width: SidePanelWidth, isOpen: isOpen, onRequestClose: () => {
            sidePanel.close();
        } }, Array.from(sidePanelComponents.entries()).map(([key, ComponentType]) => {
        return (React.createElement(SidePanelModalItem, { key: key, id: key, width: width, state: state },
            React.createElement(ComponentType, null)));
    })));
}
export const SidePanelModal = observer(_SidePanelModal);
//# sourceMappingURL=SidePanelModal.js.map