import {
	Box,
	DEFAULT_THEME,
	MantineProvider,
	createTheme,
	mergeMantineTheme,
} from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals';
import { useEffect } from 'react';
import {
	Route,
	RouterProvider,
	createBrowserRouter,
	createRoutesFromElements,
} from 'react-router-dom';
import ThemeProvider from './components/ThemeProvider';
import { useQueryAPI } from './hooks/useAPI';
import Homepage from './pages/homepage/Homepage';
import Settings from './pages/settings/Settings';
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useAtom } from 'jotai';
import { appTheme } from './contexts/theme';
import './index.css';

function App() {
	const { data, isFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});

	const [themeName, setThemeName] = useLocalStorage<any>({
		key: 'theme',
		defaultValue: 'blackboard',
	});

	const [theme, setTheme] = useAtom(appTheme);
	useEffect(() => {
		if (data && themeName) {
			const temp = data.find((t: any) => t.name === themeName);
			setTheme(temp);
		}
	}, [isFetched, themeName]);

	const router = createBrowserRouter(
		createRoutesFromElements(
			<Route>
				<Route path='/trigger' element={<Homepage theme={theme} />} />
				<Route path='/trigger/settings' element={<Settings theme={theme} />} />
			</Route>,
		),
	);

	const overrides = createTheme({
		white: theme?.backgroundColor,
		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
	});

	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
	return (
		<>
			{theme && (
				<MantineProvider theme={mantineTheme}>
					<ThemeProvider theme={theme}>
						<ModalsProvider>
							<>
								<Box
									style={{
										width: '100%',
										height: '100%',
										position: 'fixed',
										background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(assets/backgrounds/${theme.backgroundImage})`,
										backgroundSize: 'cover',
										zIndex: -1,
									}}
								/>
								<RouterProvider router={router} />
								<ReactQueryDevtools initialIsOpen={false} />
							</>
						</ModalsProvider>
					</ThemeProvider>
				</MantineProvider>
			)}
		</>
	);
}

export default App;