<script lang="ts">
	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';
	import { browser } from '$app/environment';
	import HeadTitle from '$lib/HeadTitle.svelte';
	import '../app.css';
	import { fly } from 'svelte/transition';
	import { readable, type Readable } from 'svelte/store';
	import { navigating } from '$app/stores';

	export let data;

	let currentUserIdentity = {
		name: '',
		id: -1,
		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
	};
	const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings'];
	const previousPage: Readable<string | null> = readable(null, (set) => {
		const unsubscribe = navigating.subscribe(($navigating) => {
			if ($navigating && $navigating.from) set($navigating.from.url.pathname as unknown as null);
		});

		return () => unsubscribe();
	});
	const animationDelay = 100;

	$: way = data.url.includes('/user')
		? 200
		: $previousPage && $previousPage.includes('/user')
		? -200
		: navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
		? 200
		: -200;

	onMount(async () => {
		if (browser && localStorage.getItem('redirect')) {
			window.location.href = localStorage.getItem('redirect') ?? '/';

			localStorage.removeItem('redirect');
		}

		settings.get();

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

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;
		}
	});
</script>

<HeadTitle />

<div id="container">
	<div id="header" class="card card-centered">
		<div>
			<a href="/" class="header-item">Home</a><a href="/completed" class="header-item">Completed</a>
			<a href="/schedule" class="header-item">Subtitle Schedule</a>
			<a href="/updates" class="header-item">New Releases</a>
			<a href="/tools" class="header-item">Tools</a>
			<a href="/settings" class="header-item">Settings</a>

			<span style="opacity: 50%;" class="header-item">|</span>

			{#if data.user}
				<a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a>
			{/if}

			{#if data.user === undefined}
				<a
					class="header-item"
					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`}
					on:click={() => {
						localStorage.setItem(
							'redirect',
							window.location.origin + window.location.pathname + window.location.search
						);
					}}
				>
					Log in with AniList
				</a>
			{:else}
				<a href="/api/authentication/log-out" class="header-item">Log out </a>
				{#if data.user}
					<a href={`/user/${currentUserIdentity.name}`} class="header-item">
						<img id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
					</a>
				{/if}
			{/if}
		</div>
	</div>

	<p />

	{#key data.url}
		<div
			in:fly={{
				x: way,
				duration: animationDelay,
				delay: animationDelay
			}}
			out:fly={{ x: -way, duration: animationDelay }}
		>
			<slot />
		</div>
	{/key}
</div>

<style>
	#header {
		font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
			Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-size: 1.05em;
		font-weight: 600;
		padding: 0.8rem 0.4rem;
	}

	#header a {
		color: var(--base06);
	}

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

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

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

	/* #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 {
			opacity: 1;
			position: unset;
			padding: 0; */
		/* font-size: 5vw; */
		/* } */
	}

	/* #hover-header:hover {
		opacity: 1;
	} */

	:global(a) {
		text-decoration: none;
		transition: all 0.15s ease-in-out;
	}

	:global(a:hover) {
		text-decoration: underline;
	}

	.header-item {
		margin: 0 0.5rem;
	}

	.header-item:hover {
		text-decoration: none;
	}

	.header-item:active {
		outline: none;
	}

	#avatar {
		width: 2em;
		display: inline-block;
		vertical-align: middle;
		border-radius: 8px;
		box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base0E), 0 4px 30px var(--base01);
	}
</style>
