import { useContext, useEffect, useRef } from 'react';
import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context';
import PortalHost, { portal } from './portal-host';
const Portal = ({ children }) => {
    const manager = useContext(PortalContext);
    const keyRef = useRef(null);
    const { pageId } = useContext(RouteContext) || {};
    const varContext = useContext(VarContext);
    const parentProvides = useContext(ProviderContext);
    if (varContext) {
        children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
    }
    if (parentProvides) {
        children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>);
    }
    useEffect(() => {
        manager.update(keyRef.current, children);
    }, [children]);
    useEffect(() => {
        if (!manager) {
            throw new Error('Looks like you forgot to wrap your root component with `PortalHost` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index`.\n\n');
        }
        keyRef.current = manager.mount(children, null, pageId);
        return () => {
            manager.unmount(keyRef.current);
        };
    }, []);
    return null;
};
Portal.Host = PortalHost;
Portal.add = portal.add;
Portal.remove = portal.remove;
Portal.update = portal.update;
export default Portal;