import {
	DEFAULT_THEME,
	MantineProvider,
	createTheme,
	mergeMantineTheme,
} from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect } from 'react';
import {
	Navigate,
	Route,
	RouterProvider,
	createBrowserRouter,
	createRoutesFromElements,
} from 'react-router-dom';
import { MainLayout, ThemeProvider } from './components';
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 './index.css';
import { Homepage, Settings } from 'pages';
import { ToastContainer } from 'react-toastify';

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 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>
			</Route>,
		),
	);

	useEffect(() => {
		if (allThemes && themeName) {
			if (currentThemePlaylist === 'All') {
				if (themeName !== 'random') {
					const temp = allThemes.find((t: any) => t.name === themeName);
					setTheme(temp);
				} else {
					handleThemeChange(allThemes, false);
				}
			} else if (currentThemePlaylist === 'Time of Day') {
				const themeList = JSON.parse(
					themePlaylists.find((t: any) => t.name === currentThemePlaylist).themeList,
				);
				setTheme(
					allThemes.find(
						(t: any) => t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
					),
				);
			} else {
				const themeList = JSON.parse(
					themePlaylists.find((t: any) => t.name === currentThemePlaylist).themeList,
				);
				const filteredThemes = allThemes.filter((t: any) => themeList.includes(t.id));
				setTheme('random');
				handleThemeChange(filteredThemes, false);
			}
		}
	}, [isAllThemesFetched, themeName, currentThemePlaylist, isThemePlaylistsFetched]);

	return (
		<>
			{theme && (
				<MantineProvider theme={mantineTheme}>
					<ThemeProvider theme={theme}>
						<ToastContainer />
						<ModalsProvider>
							<RouterProvider router={router} />
							<ReactQueryDevtools initialIsOpen={false} />
						</ModalsProvider>
					</ThemeProvider>
				</MantineProvider>
			)}
		</>
	);
}

export default App;