import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, DarkMode, extendTheme, LightMode, useTheme, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import React from "react";
import ChakraNestedProvider from "./utils/ChakraNestedProvider";
import { applyTheme } from "./registeredThemes";
import { RuntimeContext } from "@qorebase/app-component";
import { Global } from "@emotion/react";
const RuntimeBackground = (props) => {
    return (_jsx(Box, Object.assign({ bg: "bg.900", css: css `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
      ` }, { children: props.children })));
};
const RuntimeTheme = (props) => {
    var _a;
    const theme = useTheme();
    const ColorModeWrapper = ((_a = theme.config) === null || _a === void 0 ? void 0 : _a.initialColorMode) === "dark" ? DarkMode : LightMode;
    return (_jsx(ColorModeWrapper, { children: _jsx(RuntimeBackground, { children: props.children }) }));
};
export default RuntimeTheme;
export const RuntimeThemeProvider = (props) => {
    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);
    return (_jsxs(ChakraNestedProvider, Object.assign({ theme: atheme, cssVarsRoot: "body" }, { children: [_jsx(Global, { styles: css `
          ${appTheme.fonts.heading[1]}
          ${appTheme.fonts.body[1]}
        ` }), props.children] })));
};
//# sourceMappingURL=RuntimeTheme.js.map