import { A, Navigate, Route, Router, useNavigate } from "@solidjs/router";
import { type Component, type ParentProps } from "solid-js";
import {
	IconArrowLeft,
	IconHome,
	IconPhoto,
	IconSearch,
} from "@tabler/icons-solidjs";
import { Entity } from "./Entity";
import { onAndroidMount } from "./mobile";
import { FrontPage, Gallery, ImagePage, Login, Settings } from "./pages";
import { SearchImageContextProvider } from "@contexts/SearchImageContext";
import { WithNotifications } from "@contexts/Notifications";
import { ProtectedRoute } from "@components/protected-route";

const AppWrapper: Component<ParentProps> = (props) => {
	return (
		<div class="flex w-full justify-center h-screen">{props.children}</div>
	);
};

const WithDock: Component<ParentProps> = (props) => {
	const nav = useNavigate();

	return (
		<div class="w-full flex flex-col items-center">
			{/* TODO: this should only show up when NOT on the home page. */}
			<div class="cursor-pointer" onClick={() => nav(-1)}>
				<IconArrowLeft />
			</div>
			{props.children}
			<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
				<A href="/" class="w-full flex justify-center items-center">
					<IconHome />
				</A>
				<A href="/" class="w-full flex justify-center items-center">
					<IconSearch />
				</A>
				<A href="/" class="w-full flex justify-center items-center">
					<IconPhoto />
				</A>
			</div>
		</div>
	);
};

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

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

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