import { useNavigate, useParams } from "react-router-dom"
import { Pico8Console } from "./pico8-client/Pico8Console";
import { useEffect, useState } from "react";
import { DbRelease } from "../server/dbal/dbal";
import { css } from "@emotion/css";

type Info = {
    release: DbRelease | null;
    versions: string[];
}

export const GamePage = () => {
	const {author, slug, version} = useParams();
	const navigate = useNavigate();
	const [info, setInfo] = useState<Info | null>(null);

	useEffect(() => {
		const fetchInfo = async () => {
			let url = `/api/release?author=${author}&slug=${slug}`;
			if (version) {
				url += `&version=${version.slice(1)}`;
			}
			const information = await fetch(url);
			const json = await information.json();
			setInfo(json);
		}
		fetchInfo();
	}, [setInfo, author, slug, version]);

	if (!info) {
		return (
			<div className={`
				min-height: 100vh;
			`}>
				LOADING...
			</div>
		)
	}

	if (!info.release) {
		return (
			<div className={`
				min-height: 100vh;
			`}>
				NOT FOUND
			</div>
		)
	}

	return (
		<div className={css`
			min-height: 100vh;
		`}>
			<div className={css`
				margin: auto;
				width: max-content;
			`}>
				<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
				<h2>By {info.release.author}</h2>
				<div className={css`
					width: 512px;
					max-width: 100%;
				`}>
					<Pico8Console carts={info.release.carts} />
				</div>
				<div className={css`
					display: flex;
					justify-content: end;
				`}>
					Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
						{
							info.versions.map(v => (
								<option key={v} value={v}>{v}</option>
							))
						}
					</select>
				</div>
				<div>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
					Content below<br/>
				</div>
			</div>
		</div>
	)
}