/**
 * Elementor App
 */
import { useContext } from 'react';
import router from '@elementor/router';
import { Router, LocationProvider, createHistory } from '@reach/router';
import { createHashSource } from 'reach-router-hash-history';
import NotFound from 'elementor-app/pages/not-found';
import Index from 'elementor-app/pages/index';
import ErrorBoundary from 'elementor-app/organisms/error-boundary';
import './app.scss';

import { AppContext } from 'elementor-app/app-context';

import { ThemeProvider } from 'styled-components';

const { Suspense } = React;

export default function App() {
	const appContext = useContext( AppContext ),
		{ isDarkMode } = appContext.state,
		theme = {
			config: {
				variants: {
					light: ! isDarkMode,
					dark: isDarkMode,
				},
			},
		};

	// Use hash route because it's actually rendered on a WP Admin page.
	// Make it public for external uses.
	router.appHistory = createHistory( createHashSource() );

	return (
		<ErrorBoundary>
			<LocationProvider history={ router.appHistory }>
				<ThemeProvider theme={ theme }>
					<Suspense fallback={ null }>
						<Router>
							{ router.getRoutes() }
							<Index path="/" />
							<NotFound default />
						</Router>
					</Suspense>
				</ThemeProvider>
			</LocationProvider>
		</ErrorBoundary>
	);
}