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";

const Profile = () => {
	let dialogRef!: HTMLDialogElement;
	const [profile] = createResource(async () => 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 = () => (
	<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="/:game"
			component={lazy(() => import("./routes/[game]/index"))}
		/>
		<Route
			path="/:game/:instance"
			component={lazy(() => import("./routes/[game]/[instance]"))}
		/>
	</Router>
);

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