//
// Copyright 2022 DXOS.org
//
import React, { useEffect, useState } from 'react';
import { ClientProvider } from '@dxos/react-client';
import { ThemeProvider } from '@dxos/react-ui';
import { defaultTx } from '@dxos/ui-theme';
import { ErrorBoundary } from '../components';
import { Devtools } from './Devtools';
// TODO(burdon): Factor out. See copy paste in testbench-app.
const useThemeWatcher = () => {
    const [themeMode, setThemeMode] = useState('dark');
    const setTheme = ({ matches: prefersDark }) => {
        document.documentElement.classList[prefersDark ? 'add' : 'remove']('dark');
        setThemeMode(prefersDark ? 'dark' : 'light');
    };
    useEffect(() => {
        const modeQuery = window.matchMedia('(prefers-color-scheme: dark)');
        setTheme({ matches: modeQuery.matches });
        modeQuery.addEventListener('change', setTheme);
        return () => modeQuery.removeEventListener('change', setTheme);
    }, []);
    return themeMode;
};
export const App = (props) => {
    const themeMode = useThemeWatcher();
    return (React.createElement(ThemeProvider, { tx: defaultTx, themeMode, noCache: true },
        React.createElement(ErrorBoundary, null,
            React.createElement(ClientProvider, { ...props },
                React.createElement(Devtools, null)))));
};
export default App;
//# sourceMappingURL=App.js.map