import "./css/main.css";

import { Footer } from "./components/Footer";
import { NavigationBar } from "./components/NavigationBar";
import { html } from "./html";
import { Router } from "./router";

let app = document.querySelector("#app");
if (!app) {
	document.body.innerHTML = html`<div id="app"></div>`;
	app = document.querySelector("#app") as HTMLElement;
}

app.innerHTML = html`
  <div class="layout">
    ${NavigationBar()}
    <main class="main-content" id="page-content"></main>
  </div>
`;

const pageContent = document.querySelector("#page-content") as HTMLElement;
const createLazyPage = (importFn: () => Promise<{ default: () => string }>) => {
	return async () => {
		const { default: PageComponent } = await importFn();
		return PageComponent();
	};
};

export const router = new Router(pageContent)
	.addRoute({
		path: "/",
		component: createLazyPage(() => import("./pages/HomePage")),
		title: "home",
		showInNavigation: true,
	})
	.addRoute({
		path: "/uses",
		component: createLazyPage(() => import("./pages/UsesPage")),
		title: "uses",
		showInNavigation: true,
	})
	.addRoute({
		path: "/projects",
		component: createLazyPage(() => import("./pages/ProjectsPage")),
		title: "projects",
		showInNavigation: true,
	})
	.addRoute({
		path: "/gallery",
		component: createLazyPage(() => import("./pages/GalleryPage")),
		title: "gallery",
		showInNavigation: true,
	})
	.addRoute({
		path: "*",
		component: createLazyPage(() => import("./pages/NotFoundPage")),
		title: "not found",
		showInNavigation: false,
	});
router.start();

const params = new URLSearchParams(window.location.search);
const path = params.get("path");
if (path) {
	router.navigate(path);
	params.delete("path");
	window.history.replaceState({}, "", window.location.pathname);
}

export const aboutString = `stupid demifem cat and/or rat that does ui/ux design and web development.`;

const footer = Footer();
pageContent.insertAdjacentHTML("afterend", footer);