import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import NProgress from 'nprogress';
import { useEffect, useMemo, useRef } from 'react';
import { Outlet, useNavigation } from 'react-router';
import { RecoilURLSync } from 'recoil-sync';
import { ThemeProvider } from '@darajs/styled-components';
import { GlobalStyle } from '../../global-styles';
import { useConfig } from '../context/config-context';
import { useVariable } from '../interactivity';
import { PathParamSync, RouteMatchSync } from '../interactivity/persistence';
import { resolveTheme } from '../utils';
import useUrlSync from '../utils/use-url-sync';
import InsecureOriginBanner from './insecure-origin-banner';
function StyleRoot(props) {
    const config = useConfig();
    const [mainTheme] = useVariable(config.theme.main);
    const theme = useMemo(() => resolveTheme(mainTheme, config.theme.base), [config.theme.base, mainTheme]);
    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsx(GlobalStyle, {}), props.children] }));
}
/**
 * Rendered around the entire router content, regardless of whether it's the authenticated content
 * or e.g. auth pages
 */
function UnauthenticatedRoot() {
    const syncOptions = useUrlSync();
    const navigation = useNavigation();
    const progressRef = useRef(false);
    const progressTimeout = useRef(null);
    useEffect(() => {
        // create a bar when state becomes loading or submitting
        if (!progressRef.current && (navigation.state === 'loading' || navigation.state === 'submitting')) {
            progressTimeout.current = setTimeout(() => NProgress.start(), 250);
            progressRef.current = true;
        }
        // if there is a bar and we're idle, mark it as done
        if (progressRef.current && navigation.state === 'idle') {
            if (progressTimeout.current) {
                clearTimeout(progressTimeout.current);
                progressTimeout.current = null;
            }
            progressRef.current = false;
            if (NProgress.isStarted()) {
                NProgress.done();
            }
        }
    }, [navigation.state]);
    return (_jsx(PathParamSync, { children: _jsx(RouteMatchSync, { children: _jsx(RecoilURLSync, Object.assign({}, syncOptions, { children: _jsxs(StyleRoot, { children: [_jsx(InsecureOriginBanner, {}), _jsx(Outlet, {})] }) })) }) }));
}
export default UnauthenticatedRoot;
//# sourceMappingURL=unauthenticated-root.js.map