<script lang="ts">
	import '../app.css';
	import { env } from '$env/dynamic/public';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';

	let navPaths = [
		{
			name: 'Startseite',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
			href: `${env.PUBLIC_BASE_PATH}/`,
			active: false
		},
		{
			name: 'Registrieren',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.png`,
			href: `${env.PUBLIC_BASE_PATH}/register`,
			active: false
		},
		{
			name: 'Regeln',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.png`,
			href: `${env.PUBLIC_BASE_PATH}/rules`,
			active: false
		},
		{
			name: 'FAQ',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.png`,
			href: `${env.PUBLIC_BASE_PATH}/faq`,
			active: false
		},
		{
			name: 'Feedback & Kontakt',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.png`,
			href: `${env.PUBLIC_BASE_PATH}/feedback`,
			active: false
		},
		{
			name: 'Team',
			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.png`,
			href: `${env.PUBLIC_BASE_PATH}/team`,
			active: false
		}
	];

	let showMenuPermanent = false;

	let onAdminPage = false;
	$: onAdminPage =
		$page.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
		$page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`;
	$: {
		for (let i = 0; i < navPaths.length; i++) {
			navPaths[i].active = navPaths[i].href === $page.url.pathname;
		}
	}

	let isTouch = false;
	let nav: HTMLDivElement;
</script>

<svelte:body
	on:touchend={(e) => {
		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore
		if (isTouch && !nav.contains(e.target)) showMenuPermanent = false;
	}}
/>

<svelte:head>
	{#if !onAdminPage}
		<meta property="og:url" content={$page.url.toString()} />
		<meta property="og:type" content="website" />
		<meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.png" />
	{/if}
</svelte:head>

<main>
	<div class="min-h-[calc(100vh-3.5rem)] h-full w-full" class:min-h-screen={onAdminPage}>
		<slot />
	</div>
</main>
<nav>
	<div
		class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50"
		class:hidden={onAdminPage}
		bind:this={nav}
	>
		<button
			class={isTouch
				? 'btn btn-square relative w-16 h-16'
				: 'btn btn-square group/menu-button relative w-16 h-16'}
			on:click={() => {
				if (!isTouch) {
					let activePath = navPaths.find((path) => path.active);
					if (activePath !== undefined) {
						goto(activePath.href);
					}
					showMenuPermanent = !showMenuPermanent;
				}
			}}
			on:touchend={() => {
				isTouch = true;
				showMenuPermanent = !showMenuPermanent;
			}}
		>
			<img
				class="absolute w-full h-full p-1 pixelated"
				src="{env.PUBLIC_BASE_PATH}/img/menu-button.png"
				alt="menu"
			/>
			<img
				class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
				class:opacity-100={isTouch && showMenuPermanent}
				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
				alt="menu hover"
			/>
		</button>
		<div
			class:hidden={!showMenuPermanent}
			class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
		>
			<ul class="flex flex-col bg-base-200 rounded">
				{#each navPaths as navPath, i}
					<li
						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
						data-tip={navPath.name}
					>
						<a
							class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
							href={navPath.href}
							on:click={() => goto(navPath.href)}
						>
							<div
								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.png'); background-position: -{i *
									3.5}rem 0;"
								class="block w-full h-full bg-no-repeat bg-horizontal-sprite pixelated"
							/>
							<div class="absolute flex justify-center items-center w-full h-full">
								<img class="w-1/2 h-1/2 pixelated" src={navPath.sprite} alt={navPath.name} />
							</div>
							<img
								class="transition-opacity delay-50 group-hover/menu-item:opacity-100 absolute w-full h-full pixelated scale-110 z-10"
								class:opacity-0={!navPath.active}
								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
								alt="menu hover"
							/>
						</a>
					</li>
				{/each}
			</ul>
		</div>
	</div>
</nav>
{#if !onAdminPage && $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/register`}
	<footer>
		<div
			class="flex justify-around items-center h-14 w-full bg-base-300"
			class:hidden={onAdminPage}
		>
			<div class="hidden sm:block">
				<p>© {new Date().getFullYear()} MHSL Craftattack Team</p>
			</div>
			<div class="flex gap-4">
				<a class="link" href="https://mhsl.eu/id.html" target="_blank">Impressum</a>
				<a class="link" href="https://mhsl.eu/datenschutz.html" target="_blank">Datenschutz</a>
			</div>
		</div>
	</footer>
{/if}