import React, { useMemo, useState } from 'react';
import { useReactive } from '@wix/bex-utils/react';
import { PageContextProvider, useWixPatternsContainer, } from '@wix/bex-core/react';
import { PageState, SidePanelWidth } from '@wix/bex-core';
import { runInAction } from 'mobx';
import { WixDesignSystemProvider } from '@wix/design-system';
export function PageWrapperBase(props) {
    const { pageState, children } = props;
    const [state] = useState(() => pageState ?? new PageState());
    const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
    const sidePanelOpen = useReactive(_sidePanelOpen);
    const { environment, useRelativeSidePanel } = useWixPatternsContainer();
    // CAIRO-3582: modify mobile detection to use user agent
    // useEffect(() => {
    //   return state.init();
    // }, [state]);
    const pageAndModalsRootStyle = useMemo(() => ({
        position: 'relative',
        width: sidePanelOpen ? `calc(100% - ${SidePanelWidth}px)` : '100%',
        height: '100%',
        transition: 'width 0.4s ease 0s',
        zIndex: 1,
    }), [sidePanelOpen]);
    const rootStyle = useMemo(() => ({
        position: 'relative',
        width: '100%',
        height: '100%',
        overflow: useRelativeSidePanel ? 'hidden' : undefined,
    }), []);
    const modalsContainerStyle = useMemo(() => ({
        position: 'absolute',
        zIndex: 1,
    }), []);
    let child = (React.createElement(PageContextProvider, { value: state },
        React.createElement("div", { "data-wix-patterns": true, style: rootStyle, "data-hook": "cairo-root-stacking", ref: (el) => {
                stackingRootRef.current = el;
            }, lang: environment.language },
            React.createElement("div", { style: pageAndModalsRootStyle }, children),
            React.createElement("div", { "data-hook": "modals-container", ref: (el) => {
                    runInAction(() => {
                        modalsContainerRef.current = el;
                    });
                }, style: modalsContainerStyle }))));
    if (state.isMobile) {
        child = (React.createElement(WixDesignSystemProvider, { mobile: true }, child));
    }
    return child;
}
//# sourceMappingURL=PageWrapperBase.js.map