<script>
	import UserListed from "$lib/components/UserListed.svelte";
	export let game;
	let state = 0;

	function updateState(newState) {
		state = newState;
	}
</script>

<svelte:head>
	<title>{game?.name} - Rowblox</title>
</svelte:head>

<div class="mx-auto rounded-lg shadow border border-gray-300 p-4 divide-y">
	<div class="flex">
		<img class="float-left h-[22.5rem]" alt="" src="/img/background.png" />
		<div class="w-full flex flex-col pl-4">
			<div class="max-w-[22.9rem]">
				<p class="text-3xl font-bold truncate">{game?.name}</p>
				<p class="text-zinc-500">By <a class="font-bold text-blue-500" href="/users/{game?.creator?._id}">{game?.creator?.username}</a></p>
			</div>
			<div class="flex text-sm pt-1">
				<p class="px-2 bg-zinc-500 rounded-md text-white mr-1">Offline</p>
				<p class="px-2 bg-green-500 rounded-md text-white mr-1">Online</p>
				<p class="px-2 bg-blue-500 rounded-md text-white mr-1">2015</p>
				<p class="px-2 bg-blue-500 rounded-md text-white mr-1">2013</p>
			</div>
			<span class="flex-grow" />
			<div class="flex">
				<a class="flex-auto text-lg text-blue-500 px-4 py-0.5 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500 mr-0.5 mb-1 text-center" href="/games/{game?.id}/edit">
					Edit
				</a>
				<button class="flex-auto text-lg text-blue-500 px-4 py-0.5 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500 ml-0.5 mb-1">Host</button>
			</div>
			<button class="text-2xl text-blue-500 px-4 py-2 rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500">Play</button>
		</div>
	</div>
</div>

<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
	<div class="flex flex-row text-xl text-center text-black">
		<button
			class="flex-auto {state == 0 && 'font-bold text-black text-opacity-30'}"
			on:click={() => {
				updateState(0);
			}}>About</button
		>
		<button
			class="flex-auto {state == 1 && 'font-bold text-black text-opacity-30'}"
			on:click={() => {
				updateState(1);
			}}>Store</button
		>
		<button
			class="flex-auto {state == 2 && 'font-bold text-black text-opacity-30'}"
			on:click={() => {
				updateState(2);
			}}>Players</button
		>
	</div>
</div>

{#if state == 0}
	<div class="rounded-lg shadow border border-gray-300 p-2 mt-4 divide-y">
		<div class="pb-2">
			<p class="px-2 py-1 font-bold text-xl">Description</p>
			<p class="px-2 text-black text-opacity-80">Test Game</p>
		</div>
		<div class="flex flex-row pb-2">
			<div class="mx-4 mt-4 text-center flex-grow">
				<p class="text-zinc-500 inline-block">Players</p>
				<p class="">0</p>
			</div>
			<div class="mx-4 mt-4 text-center flex-grow">
				<p class="text-zinc-500 inline-block">Visits</p>
				<p class="">0</p>
			</div>
			<div class="mx-4 mt-4 text-center flex-grow">
				<p class="text-zinc-500 inline-block">Created</p>
				<p class="">10/10/22</p>
			</div>
			<div class="mx-4 mt-4 text-center flex-grow">
				<p class="text-zinc-500 inline-block">Updated</p>
				<p class="">10/10/22</p>
			</div>
			<div class="mx-4 mt-4 text-center flex-grow">
				<p class="text-zinc-500 inline-block">Max Players</p>
				<p class="">No Limit</p>
			</div>
		</div>
	</div>
{:else if state == 1}
	<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
		<p class="px-2 py-1 font-bold text-xl">Gamepasses</p>
		<p class="px-2 text-black text-opacity-80">This store does not have any gamepasses for sale.</p>
	</div>
{:else if state == 2}
	<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
		<p class="px-2 py-1 font-bold text-xl">Players</p>
		<p class="px-2 text-black text-opacity-80">This game does not have any players.</p>
	</div>

	<div class="rounded-lg shadow border border-gray-300 p-2 mt-4">
		<p class="px-2 py-1 font-bold text-xl mb-1">Players</p>
		<UserListed />
		<UserListed />
		<UserListed />
		<UserListed />
	</div>
{/if}
