<script lang="ts">
	import '../app.css';
	import Login from '$lib/client/components/login.svelte';
	import { auth } from '$lib/client/stores/auth';
	import Nav from '$lib/client/components/nav.svelte';
	import {
		IconBars3, IconBell, IconMagnifyingGlass, IconXMark
	} from '$lib/client/components/icons';
	import { fly, fade } from 'svelte/transition'
	import {page} from "$app/stores";
	import {onMount} from "svelte";

	let showSidePanel = false, width
	function toggleSidePanel() {
		showSidePanel = !showSidePanel
	}

	let isDropdownOpen = false;

	const toggleDropdown = (): void => {
		isDropdownOpen = !isDropdownOpen;
	};

	onMount(()=>{
		return page.subscribe(() => {
			showSidePanel = false;
		})
	})
</script>

{#if $auth.isSignedIn}
	<div>
		<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
		{#if showSidePanel}
		<div class="relative z-50 lg:hidden" role="dialog" aria-modal="true">
			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>

			<div bind:clientWidth={width} transition:fly={{ x: -width }} class="fixed inset-0 flex">
				<div class="relative mr-16 flex w-full max-w-xs flex-1">
					<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
						<button type="button" class="-m-2.5 p-2.5" on:click={toggleSidePanel}>
							<span class="sr-only">Close sidebar</span>
							<IconXMark class="text-white" />
						</button>
					</div>

					<!-- Sidebar component -->
					<div
						class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4 ring-1 ring-white/10"
					>
						<Nav />
					</div>
				</div>
			</div>
		</div>
		{/if}

		<!-- Static sidebar for desktop -->
		<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
			<!-- Sidebar component -->
			<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4">
				<Nav />
			</div>
		</div>

		<div class="lg:pl-72">
			<div
				class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
			>
				<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" on:click={toggleSidePanel}>
					<span class="sr-only">Open sidebar</span>
					<IconBars3 />
				</button>

				<!-- Separator -->
				<div class="h-6 w-px bg-primary/10 lg:hidden" aria-hidden="true"></div>

				<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
					<form class="relative flex flex-1" action="#" method="GET">
						<label for="search-field" class="sr-only">Search</label>
						<IconMagnifyingGlass class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" />
						<input
							id="search-field"
							class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
							placeholder="Search..."
							type="search"
							name="search"
						/>
					</form>
					<div class="flex items-center gap-x-4 lg:gap-x-6">
						<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
							<span class="sr-only">View notifications</span>
							<IconBell />
						</button>

						<!-- Separator -->
						<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-primary/10" aria-hidden="true"></div>

						<!-- Profile dropdown -->
						<div class="relative">
							<button
								type="button"
								class="-m-1.5 flex items-center p-1.5"
								id="user-menu-button"
								aria-expanded="false"
								aria-haspopup="true"
								on:click|preventDefault={toggleDropdown}
							>
								<span class="sr-only">Open user menu</span>
								<img
									class="h-8 w-8 rounded-full bg-gray-50"
									src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
									alt=""
								/>
								<span class="hidden lg:flex lg:items-center">
									<span
										class="ml-4 text-sm leading-6 text-gray-900"
										aria-hidden="true">Tom Cook</span
									>
									<svg
										class="ml-2 h-5 w-5 text-gray-400"
										viewBox="0 0 20 20"
										fill="currentColor"
										aria-hidden="true"
									>
										<path
											fill-rule="evenodd"
											d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
											clip-rule="evenodd"
										/>
									</svg>
								</span>
							</button>

							<!--
								Dropdown menu, show/hide based on menu state.

								Entering: "transition ease-out duration-100"
									From: "transform opacity-0 scale-95"
									To: "transform opacity-100 scale-100"
								Leaving: "transition ease-in duration-75"
									From: "transform opacity-100 scale-100"
									To: "transform opacity-0 scale-95"
							-->
							{#if isDropdownOpen}
								<div
									class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-primary bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
									role="menu"
									aria-orientation="vertical"
									aria-labelledby="user-menu-button"
									tabindex="-1"
								>
									<!-- Active: "bg-gray-50", Not Active: "" -->
									<a
										href="/"
										class="block px-3 py-1 text-sm leading-6 text-gray-900"
										role="menuitem"
										tabindex="-1"
										id="user-menu-item-0">Your profile</a
									>
									<button
										on:click={auth.signOut}
										class="block px-3 py-1 text-sm leading-6 text-gray-900"
										role="menuitem"
										tabindex="-1"
										id="user-menu-item-1">Sign out</button
									>
								</div>
							{/if}
						</div>
					</div>
				</div>
			</div>

			<main class="py-5 lg:py-10">
				<div class="px-4 sm:px-6 lg:px-8">
					<!-- Your content -->
					<slot />
				</div>
			</main>
		</div>
	</div>
{:else}
	<Login />
{/if}
