"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
exports.__esModule = true;
exports.VitroApp = void 0;
// @jsx jsx
var react_1 = require("@chakra-ui/react");
var react_2 = require("@emotion/react");
var react_3 = __importStar(require("react"));
var css_1 = require("../css");
var ExperimentsNav_1 = require("./ExperimentsNav");
var stylis_plugin_extra_scope_1 = __importDefault(require("stylis-plugin-extra-scope"));
var cache_1 = __importDefault(require("@emotion/cache"));
var SplashScreen_1 = require("./SplashScreen");
var jotai_1 = require("jotai");
react_2.jsx;
// TODO nprogress stuff
// Router.events.on('routeChangeStart', (url) => {
//     // console.log(`Loading: ${url}`)
//     NProgress.start()
// })
// Router.events.on('routeChangeComplete', () => NProgress.done())
// Router.events.on('routeChangeError', () => NProgress.done())
var PAGE_PADDING = '40px';
var SM_PAGE_PADDING = '20px';
var emotionCache = cache_1["default"]({
    key: 'vitro',
    stylisPlugins: [stylis_plugin_extra_scope_1["default"]('body')]
});
function VitroApp(_a) {
    var experimentsTree = _a.experimentsTree, children = _a.children, props = __rest(_a, ["experimentsTree", "children"]);
    return (react_3["default"].createElement(react_2.CacheProvider, { value: emotionCache },
        react_3["default"].createElement(react_1.ChakraProvider, null,
            react_3["default"].createElement(jotai_1.Provider, null,
                react_3["default"].createElement(react_1.CSSReset, null),
                react_3["default"].createElement(react_2.Global, { styles: [css_1.globalStyles] }),
                react_3["default"].createElement(Content, { experimentsTree: experimentsTree }, children)))));
}
exports.VitroApp = VitroApp;
function useSSRSkip(_a) {
    _a = {};
    var _b = react_3.useState(false), r = _b[0], set = _b[1];
    react_3.useEffect(function () {
        set(true);
    }, []);
    if (!r) {
        return false;
    }
    return r;
}
var Content = function (_a) {
    var experimentsTree = _a.experimentsTree, children = _a.children;
    var loaded = useSSRSkip();
    var colorMode = react_1.useColorMode().colorMode;
    if (!loaded) {
        return (react_3["default"].createElement(react_3["default"].Fragment, null,
            react_3["default"].createElement(BgStyles, null),
            react_3["default"].createElement(SplashScreen_1.SplashScreen, null)));
    }
    return (react_3["default"].createElement(react_3["default"].Fragment, null,
        react_3["default"].createElement(BgStyles, null),
        react_3["default"].createElement(react_1.Box, { className: 'vitro', overflowY: 'auto', overflowX: 'hidden', 
            // width={['270px']}
            width: '350px', position: 'fixed', 
            // pr={PAGE_PADDING}
            px: PAGE_PADDING, top: '0', pt: PAGE_PADDING, bottom: '0' },
            react_3["default"].createElement(ExperimentsNav_1.ExperimentsNav, { className: 'vitro smoothscroll', experimentsTree: experimentsTree, width: '100%', fontWeight: '500', display: ['none', null, null, 'flex'] }),
            react_3["default"].createElement(react_1.Box, { h: PAGE_PADDING })),
        react_3["default"].createElement(react_1.Box, { className: 'vitro smoothscroll', position: 'absolute', height: 'content', right: '0', top: '0', bottom: '0', left: [SM_PAGE_PADDING, null, null, '350px'], as: 'main', borderLeftWidth: ['0', null, null, '2px'], borderColor: { light: 'gray.200', dark: 'gray.700' }[colorMode], pl: ['0', null, null, PAGE_PADDING], pt: [SM_PAGE_PADDING, null, null, PAGE_PADDING], pr: [SM_PAGE_PADDING, null, null, PAGE_PADDING], pb: [SM_PAGE_PADDING, null, null, PAGE_PADDING], 
            // align='stretch'
            overflowY: 'scroll', 
            // safari fix
            css: react_2.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    & > * {\n                        flex-shrink: 0;\n                    }\n                "], ["\n                    & > * {\n                        flex-shrink: 0;\n                    }\n                "]))) }, children)));
};
var BgStyles = function () {
    var colorMode = react_1.useColorMode().colorMode;
    return (react_3["default"].createElement(react_2.Global, { styles: react_2.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                body {\n                    min-height: 100vh !important;\n                    min-width: 100vw !important;\n                    background-color: ", " !important;\n                }\n            "], ["\n                body {\n                    min-height: 100vh !important;\n                    min-width: 100vw !important;\n                    background-color: ",
            " !important;\n                }\n            "])), {
            light: '#EDF2F7',
            dark: '#1A202C'
        }[colorMode]) }));
};
var templateObject_1, templateObject_2;
//# sourceMappingURL=VitroApp.js.map