import {
	DEFAULT_THEME,
	MantineProvider,
	createTheme,
	mergeMantineTheme,
} from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import {
	Navigate,
	Route,
	RouterProvider,
	createBrowserRouter,
	createRoutesFromElements,
} from 'react-router-dom';
import { Loading, MainLayout, ThemeProvider } from './components';
import '@mantine/core/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import './index.css';
import { Homepage, Settings } from 'pages';
import { ToastContainer } from 'react-toastify';
import type { Theme, ThemePlaylist } from 'types';

function App() {
	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const { data: themePlaylists, isFetched: isThemePlaylistsFetched } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const { theme, setTheme, themeName, handleThemeChange, currentThemePlaylist } =
		useCommonHooks();
	const [loaded, setLoaded] = useState<boolean>(false);
	const overrides = createTheme({
		white: theme?.backgroundColor,
		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
	});
	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);

	const router = createBrowserRouter(
		createRoutesFromElements(
			<Route>
				<Route path='' element={<MainLayout />}>
					<Route
						path='/'
						element={<Navigate to={`/${import.meta.env.VITE_BASE_URL}`} />}
					/>
					<Route path={`/${import.meta.env.VITE_BASE_URL}`} element={<Homepage />} />
					<Route
						path={`/${import.meta.env.VITE_BASE_URL}/settings`}
						element={<Settings />}
					/>
					<Route
						path={`/${import.meta.env.VITE_BASE_URL}/settings/:tabValue`}
						element={<Settings />}
					/>
				</Route>
			</Route>,
		),
	);

	useEffect(() => {
		if (allThemes && themeName) {
			if (currentThemePlaylist === 'All') {
				if (themeName !== 'random') {
					const temp = allThemes.find((t: Theme) => t.name === themeName);
					setTheme(temp);
					setLoaded(true);
				} else {
					handleThemeChange(allThemes, false);
					setLoaded(true);
				}
			} else if (currentThemePlaylist === 'Time of Day') {
				const themeList = JSON.parse(
					themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
						.themeList,
				);
				setTheme(
					allThemes.find(
						(t: Theme) =>
							t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
					),
				);
				setLoaded(true);
			} else {
				const themeList = JSON.parse(
					themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
						.themeList,
				);
				const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
				setTheme('random');
				setLoaded(true);
				handleThemeChange(filteredThemes, false);
			}
		}
	}, [
		isAllThemesFetched,
		themeName,
		allThemes,
		currentThemePlaylist,
		isThemePlaylistsFetched,
	]);
	return (
		<>
			{theme && (
				<MantineProvider theme={mantineTheme}>
					<ThemeProvider theme={theme}>
						<ToastContainer />
						<Loading loaded={loaded} />
						<RouterProvider router={router} />
						<ReactQueryDevtools initialIsOpen={false} />
					</ThemeProvider>
				</MantineProvider>
			)}
		</>
	);
}

export default App;