<script lang="ts">
	import '../app.css';

	import AuthForm from '$lib/AuthForm.svelte';

	import { loginAction, logoutAction, registerAction, session } from '$lib/state';

	async function onLogin(evt: CustomEvent) {
		const { email, password } = evt.detail;
		await loginAction({ email, password });
	}

	async function onLogout() {
		logoutAction();
	}

	interface SessionInfo {
		sessionId?: string;
		account?: {
			id: string;
			email: string;
			role: 'BIDDER' | 'USER' | 'ADMINISTRATOR' | 'ANONYMOUS';
			createdTs: string;
		};
	}

	let sessionVal: SessionInfo;

	session.subscribe((v) => (sessionVal = v));

	$: isLoggedIn = !!sessionVal?.sessionId;
</script>

<svelte:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>BH Admin Console</title>

	<meta name="description" content="" />
</svelte:head>

<main class="flex flex-col w-full">
	<nav
		class="flex w-full bg-bh-gold text-bh-black fixed top-0 left-0 right-0"
		style="height: 80px;"
	>
		<img
			class="pr-5"
			style="width: 450px; height: 80px;"
			src="/logo_black_gold.svg"
			alt="BarrettHousen"
		/>
		<ul class="flex w-full py-3 items-center justify-between">
			<li class="flex grow justify-center">
				<span class="flex grow" style="max-width: 75%;"> Admin Stuff </span>
			</li>
			<li class="pr-5">
				<!-- <span>I want email alerts!</span> -->
				{#if !isLoggedIn}
					<AuthForm on:login={onLogin} />
				{:else}
					<span>
						{sessionVal.account?.email}
					</span>
					<button
						class="bg-bh-gold border-bh-black px-2 py-1 text-bh-black"
						on:click|stopPropagation={onLogout}>Log out</button
					>
				{/if}
			</li>
		</ul>
	</nav>
	<div class="flex flex-row flex-grow h-full" style="padding-top: 80px;">
		<div id="gutter" class="h-full" style="min-width: 195px; max-width: 195px;" />
		<section id="content" class="py-6 pl-4 grow border-l border-bh-gold" style="min-height: 100vh;">
			<slot />
		</section>
	</div>
	<footer
		class="flex justify-center bg-bh-gold text-bh-black w-full py-10 shadow-inner shadnow-md shadow-bh-black"
	>
		<p>
			We find great auctions of rare and one of a kind collectibles from around the web and compile
			them in one easy place.
		</p>
	</footer>
</main>
