// Path: Frontend/src/app.tsx

import { Router, useLocation } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense, Show, type ParentComponent } from "solid-js";
import { Transition } from "solid-transition-group";
import { ThemeProvider } from "./context/theme/context";
import "./styles/main.scss";

const AppRoot: ParentComponent = (props) => {
	const location = useLocation();
	const isViewportLockedRoute = () => location.pathname === "/" || location.pathname.startsWith("/auth/");

	return (
		<Suspense>
			<div classList={{
				"app-route-shell": true,
				"app-route-shell-viewport-locked": isViewportLockedRoute(),
			}}>
				<Transition name="page-fade-slide">
					<Show when={location.pathname} keyed>
						{(path) => (
							<div class="page-transition-stage" data-route={path}>
								{props.children}
							</div>
						)}
					</Show>
				</Transition>
			</div>
		</Suspense>
	);
};

export default function App() {
	return (
		<ThemeProvider>
			<Router root={AppRoot}>
				<FileRoutes />
			</Router>
		</ThemeProvider>
	);
}
