import { makePersisted } from "@solid-primitives/storage";
import { Route, Router } from "@solidjs/router";
import pkg from "^/package.json";
import { createSignal, lazy, Suspense } from "solid-js";
import { render } from "solid-js/web";
import "virtual:uno.css";
import "./style.css";
import { name, setName } from "./profile";

const Profile = () => {
	let dialogRef!: HTMLDialogElement;

	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={name()}
						onChange={(e) => {
							dialogRef.close();
							setName(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 />
					<span class="fixed br m-2 font-mono text-xs">
						{"v" + pkg.version}
					</span>
				</>
			)}
		>
			<Route path="/" component={lazy(() => import("./routes/index"))} />
			<Route
				path="/t/:tableKey"
				component={lazy(() => import("./routes/[table]"))}
			/>
		</Router>
	);
};

render(App, document.getElementsByTagName("body")[0]);