import { Route, Switch, Redirect } from "wouter";
import { useTernaryDarkMode } from "usehooks-ts";
import { useEffect } from "react";

import './App.css'

import { TooltipProvider } from "./components/ui/tooltip.tsx";
import Layout from "./components/layout/layout.tsx";

import Gallery from "@/page/galleryPage.tsx";
import NotFoundPage from "@/page/404.tsx";
import LoginPage from "@/page/loginPage.tsx";
import ProfilePage from "@/page/profilesPage.tsx";
import ContentInfoPage from "@/page/contentInfoPage.tsx";
import SettingPage from "@/page/settingPage.tsx";
import ComicPage from "@/page/reader/comicPage.tsx";
import DifferencePage from "./page/differencePage.tsx";

const App = () => {
	const { isDarkMode } = useTernaryDarkMode();
	
    useEffect(() => {
        if (isDarkMode) {
            document.body.classList.add("dark");
        }
        else {
            document.body.classList.remove("dark");
        }
    }, [isDarkMode]);

	return (
		<TooltipProvider>
			<Layout>
				<Switch>
					<Route path="/" component={() => <Redirect replace to="/search?" />} />
					<Route path="/search" component={Gallery} />
					<Route path="/login" component={LoginPage} />
					<Route path="/profile" component={ProfilePage}/>
					<Route path="/doc/:id" component={ContentInfoPage}/>
					<Route path="/setting" component={SettingPage} />
					<Route path="/doc/:id/reader" component={ComicPage}/>
					<Route path="/difference" component={DifferencePage}/>
					<Route component={NotFoundPage} />
				</Switch>
			</Layout>
		</TooltipProvider>);
};

export default App