import React, { lazy, useMemo } from 'react';
import frontendGlobalComponents from '@oak/frontend-global-components';
import { renderOakFrontendGlobalComponents, } from '@oak/frontend-global-components-runtime';
const ErrorBoundary = lazy(() => import('./ErrorBoundary'));
const AppContainer = (props) => {
    const { children, messageHandler } = props;
    const globalComponents = useMemo(() => {
        if (!messageHandler) {
            return frontendGlobalComponents;
        }
        return frontendGlobalComponents.map((entry) => {
            if (entry.name !== 'oak-message') {
                return entry;
            }
            const MessageComponent = entry.Component;
            return {
                ...entry,
                Component: () => <MessageComponent messageHandler={messageHandler}/>,
            };
        });
    }, [messageHandler]);
    return (<React.Fragment>
            {renderOakFrontendGlobalComponents(globalComponents, process.env.NODE_ENV)}
            <React.Suspense fallback={<></>}>
                <ErrorBoundary>
                    {children}
                </ErrorBoundary>
            </React.Suspense>
        </React.Fragment>);
};
export default AppContainer;