import { Navigate, Route, Router } from "@solidjs/router";
import { onAndroidMount } from "./mobile";
import {
	FrontPage,
	Gallery,
	ImagePage,
	Login,
	Settings,
	Entity,
	SearchPage,
	AllImages,
} from "./pages";
import { SearchImageContextProvider } from "@contexts/SearchImageContext";
import { WithNotifications } from "@contexts/Notifications";
import { ProtectedRoute } from "@components/protected-route";
import { AppWrapper } from "@components/app-wrapper";
import { WithTopbarAndDock } from "@components/app-wrapper/with-topbar-and-dock";
import { onSendImage } from "@contexts/send-image";

export const App = () => {
	onAndroidMount();
	onSendImage();

	return (
		<SearchImageContextProvider>
			<Router>
				<Route path="/" component={AppWrapper}>
					<Route path="/login" component={Login} />

					<Route path="/" component={ProtectedRoute}>
						<Route path="/" component={WithNotifications}>
							<Route path="/" component={WithTopbarAndDock}>
								<Route path="/" component={FrontPage} />
								<Route path="/search" component={SearchPage} />
								<Route path="/all-images" component={AllImages} />
								<Route path="/image/:imageId" component={ImagePage} />
								<Route path="/entity/:entityId" component={Entity} />
								<Route path="/gallery/:entity" component={Gallery} />
								<Route path="/settings" component={Settings} />
							</Route>
						</Route>
					</Route>
				</Route>
				<Route path="*" component={() => <Navigate href="/" />} />
			</Router>
		</SearchImageContextProvider>
	);
};