import { Route, Router } from "@solidjs/router";
import { createResource, lazy, Suspense } from "solid-js";
import { render } from "solid-js/web";
import "virtual:uno.css";
import pkg from "../package.json";
import "./style.css";
import api from "./api";
import Cookies from "js-cookie";
import { mePromise } from "./profile";

const Profile = () => {
	let dialogRef!: HTMLDialogElement;
	const [profile] = createResource(() =>
		mePromise.then(() => api.profile.get())
	);

	return (
		<>
			<div
				onClick={() => dialogRef.showModal()}
				class="i-solar-user-circle-bold button s-10 m-2 cursor-pointer fixed tr"
			/>

			<dialog ref={dialogRef} closedby="any">
				<div class="fixed tr bg-emerald-100 m-2 p-4 rounded-xl border-2 shadow-md shadow-black">
					Name:{" "}
					<input
						value={profile()?.data?.name ?? ""}
						onChange={(e) =>
							api.setName.post({ name: e.target.value })
						}
						class="bg-emerald-200 border-1.5 rounded-full px-4"
					/>
				</div>
			</dialog>
		</>
	);
};

const App = () => {
	return (
		<Router
			root={(props) => (
				<>
					<Suspense>{props.children}</Suspense>
					<Profile />

					{/* Version */}
					<span class="fixed br m-2 font-mono text-xs">
						{"v" + pkg.version}
					</span>
				</>
			)}
		>
			<Route path="/" component={lazy(() => import("./routes/index"))} />
			<Route
				path="/:tableKey"
				component={lazy(() => import("./routes/[table]"))}
			/>
		</Router>
	);
};

render(App, document.getElementById("app")!);