import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, extendTheme } from "@chakra-ui/react";
import createCache from "@emotion/cache";
import { CacheProvider, css, Global } from "@emotion/react";
import weakMemoize from "@emotion/weak-memoize";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import { applyTheme } from "@qorebase/app-runtime/src/registeredThemes";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { IFrameContext } from "@qorebase/app-runtime/src/FrameContext";
import ChakraNestedProvider from "@qorebase/app-runtime/src/utils/ChakraNestedProvider";
import React from "react";
import Frame, { FrameContextConsumer } from "react-frame-component";
const breakpointsMaps = {
    small: {
        sm: "30em",
        md: "1000em",
        lg: "1000em",
        xl: "1000em",
        "2xl": "1000em",
    },
    medium: {
        sm: "30em",
        md: "48em",
        lg: "1000em",
        xl: "1000em",
        "2xl": "1000em",
    },
    large: {
        sm: "30em",
        md: "48em",
        lg: "62em",
        xl: "80em",
        "2xl": "96em",
    },
};
const memoizedCreateCacheWithContainer = weakMemoize((container) => {
    return createCache({
        key: "runtime",
        container,
    });
});
const EditorProvider = ({ children, }) => {
    const editMode = EditorContext.useSelectState((state) => state.editMode);
    const screen = EditorContext.useSelectState((state) => state.screen);
    const appTheme = RuntimeContext.useSelectState((state) => state.theme);
    const theme = React.useMemo(() => applyTheme(appTheme.id, {
        primaryColor: appTheme.options.primaryColor,
    }, {
        heading: `'${appTheme.fonts.heading[0]}', sans-serif`,
        body: `'${appTheme.fonts.body[0]}', sans-serif`,
    }), [appTheme]);
    const atheme = extendTheme(theme);
    if (editMode === "play") {
        return (_jsx(Frame, Object.assign({ style: { width: "100%", height: "100%" }, id: "editorframe", initialContent: `
        <!DOCTYPE html>
          <html>
            <head>
              <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
            </head>
            <body>
              <div></div>
              <script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
              <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
              <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
            </body>
          </html>` }, { children: _jsx(FrameContextConsumer, { children: ({ document, window }) => (_jsx(CacheProvider, Object.assign({ value: memoizedCreateCacheWithContainer(document.head) }, { children: _jsxs(ChakraNestedProvider, Object.assign({ theme: Object.assign(Object.assign({}, atheme), { breakpoints: breakpointsMaps[screen] }), environment: { document, window } }, { children: [_jsx(Global, { styles: css `
                    ${appTheme.fonts.heading[1]}
                    ${appTheme.fonts.body[1]}
                    html,
                    body,
                    .frame-root,
                    .frame-content {
                      height: 100%;
                      overflow: hidden !important;
                    }

                    .js-focus-visible :focus:not([data-focus-visible-added]) {
                      outline: none;
                      box-shadow: none;
                    }
                  ` }), _jsx(IFrameContext.Provider, Object.assign({ value: { window: window } }, { children: children }))] })) }))) }) })));
    }
    return (_jsx(Box, Object.assign({ id: "runtime-theme", fontFamily: "body" }, { children: _jsxs(ChakraNestedProvider, Object.assign({ theme: Object.assign(Object.assign({}, atheme), { breakpoints: breakpointsMaps[screen] }), environment: { document, window }, cssVarsRoot: "#runtime-theme" }, { children: [_jsx(Global, { styles: css `
            ${appTheme.fonts.heading[1]}
            ${appTheme.fonts.body[1]}
          ` }), children] })) })));
};
export default EditorProvider;
//# sourceMappingURL=EditorProvider.js.map