import Homepage from "./pages/homepage/Homepage";
import {
	MantineProvider,
	DEFAULT_THEME,
	createTheme,
	mergeMantineTheme,
} from "@mantine/core";
import {
	Route,
	createBrowserRouter,
	createRoutesFromElements,
	RouterProvider,
} from "react-router-dom";
import Settings from "./pages/settings/Settings";
import { ModalsProvider } from "@mantine/modals";
import { useLocalStorage } from "@mantine/hooks";
import { useEffect, useState } from "react";
import { useQueryAPI } from "./hooks/useAPI";
import ThemeProvider from "./components/ThemeProvider";
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 { appTheme } from "./contexts/theme";
import { useAtom } from "jotai";

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?.colorbackground,
		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 >
						<RouterProvider router={router} />
					</ModalsProvider>
				</ThemeProvider>
				</MantineProvider>
			)}
		</>
			
		
	);
}

export default App;