import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box } from "@chakra-ui/react";
import React from "react";
import "./registeredComponents/loader";
import "./registeredThemes/loader";
import { RuntimeContext } from "@qorebase/app-component";
import RuntimeTheme from "./RuntimeTheme";
import RuntimeContents from "./RuntimeContents";
import { Composer } from "./Composer";
import { importCustomComponent, importLocalNpmComponent, listLocalComponents, } from "./utils/importComponent";
import { useImportComponentLazy } from "./builtinComponents";
import QRScannerAction, { QRScannerActionContextProvider, } from "./QRScanner.action";
import { ParamsProvider } from "./ParamsProvider";
export default React.memo(function Runtime() {
    const components = RuntimeContext.useSelectState((state) => state.maps.component);
    const importComponent = useImportComponentLazy();
    // prefetch all custom components
    React.useEffect(() => {
        (Object.values(components) || [])
            .reduce((urls, component) => component.metadata.componentURL
            ? urls.concat(component.metadata.componentURL)
            : urls, [])
            .map((url) => importCustomComponent(url));
        const usedComponents = [
            ...new Set(Object.values(components).map((component) => component.componentID)),
        ] || [];
        // TODO: temporary prefetch npm component in runtime
        usedComponents.map((component) => importComponent(component));
        listLocalComponents().map(importLocalNpmComponent);
    }, []);
    return (_jsx(RuntimeTheme, { children: _jsx(Composer, { children: _jsx(Box, Object.assign({ overflow: "unset", bg: "brand.900" }, { children: _jsx(Box, Object.assign({ overflow: "unset" }, { children: _jsx(QRScannerActionContextProvider, { children: _jsxs(ParamsProvider, { children: [_jsx(RuntimeContents, {}), _jsx(QRScannerAction, {})] }) }) })) })) }) }));
});
//# sourceMappingURL=Runtime.js.map