import { A, useParams } from "@solidjs/router";

import { createEffect, createResource, For, Suspense } from "solid-js";
import api from "../../api";

export default () => {
	const param = useParams<{ game: string }>();

	const [instances, { refetch }] = createResource(
		() => param.game,
		async () => api.instances.get({ query: param }).then((res) => res.data)
	);

	return (
		<Suspense>
			<div style={{ padding: "20px" }}>
				<h1 style={{ margin: 0 }}>{param.game}</h1>
				<button
					onClick={() =>
						api.simple.newGame
							.post({
								players: ["daniel"],
							})
							.then(refetch)
					}
				>
					New Game
				</button>
				<ul>
					<For each={instances() ?? []}>
						{(instance) => (
							<li>
								<A href={`/${param.game}/${instance.id}`}>
									{instance.id}
								</A>
							</li>
						)}
					</For>
				</ul>
			</div>
		</Suspense>
	);
};