<script>
	import { env } from '$env/dynamic/public';
	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
	import { onMount } from 'svelte';
	import userIdentity from '../stores/userIdentity';
	import settings from '../stores/settings';

	export let data;

	let currentUserIdentity = { name: '...', id: -1 };

	onMount(async () => {
		settings.get();

		if (data.user !== undefined) {
			if ($userIdentity === '') {
				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
			}

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;

			// document.getElementsByTagName('html')[0].classList.add('limit-height');
			// document.getElementsByTagName('body')[0].classList.add('limit-height');
		}
	});
</script>

<div id="container">
	{#if $settings.hoverNavigation}
		<div id="hover-header">
			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
			<a href="/updates">Manga & WN Updates</a> •
			<a href="/tools">Tools</a> • {#if data.user}
				<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
			{/if} <a href="/settings">Settings</a> 」{#if data.user === undefined}
				<a
					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
					>Log in</a
				>
			{:else}
				<a href="/api/authentication/log-out">Log out ({currentUserIdentity.name})</a>
			{/if}
		</div>
	{:else}
		<div id="header">
			<p />

			<h1><a href="/">期限</a></h1>

			{#if data.user === undefined}
				<a
					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
				>
					Log in with AniList
				</a>
			{:else}
				<a href="/api/authentication/log-out">Log out from AniList ({currentUserIdentity.name})</a>
			{/if}

			<p />

			<p id="desktop-navigation-bar">
				「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
				<a href="/updates">Manga & WN Updates</a> •
				<a href="/tools">Tools</a> • {#if data.user}
					<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
				{/if} <a href="/settings">Settings</a> 」
			</p>

			<div id="mobile-navigation-bar">
				<a href="/">Home</a> • <a href="/completed">Completed</a> • <a href="/tools">Tools</a>
				{#if data.user}
					• <a href={`/user/${currentUserIdentity.name}`}>Profile</a>
				{/if}
				<br />
				<a href="/settings">Settings</a>
				<a href="/updates">Manga & LN Updates</a>

				<p />
			</div>

			<hr />
		</div>
	{/if}

	<slot />
</div>

<style>
	:global(html.light-theme) {
		filter: invert(0);
	}

	:global(html.light-theme img) {
		filter: invert(0);
	}

	:global(.limit-height) {
		height: 100%;
	}

	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#mobile-navigation-bar {
		display: none;
	}

	@media (max-width: 640px) {
		#desktop-navigation-bar {
			display: none;
		}

		#mobile-navigation-bar {
			display: unset;
		}
	}

	#hover-header {
		position: fixed;
		top: 0;
		left: 0;
		padding: 0.5% 0.25% 0.25% 0;
		z-index: 1000;
		transition: 0.25s;
		opacity: 0;
		background-color: var(--base00);
		width: 100%;
	}

	@media (max-width: 640px) {
		#hover-header {
			font-size: 5vw;
		}
	}

	#hover-header:hover {
		opacity: 1;
	}
</style>
