<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/identity';
	import settings from '$stores/settings';
	import { browser } from '$app/environment';
	import HeadTitle from '$lib/Home/HeadTitle.svelte';
	import '../app.css';
	import { readable, type Readable } from 'svelte/store';
	import { navigating } from '$app/stores';
	import Notifications from 'svelte-notifications';
	import Notification from '$lib/Notification/Notification.svelte';
	import Root from '$lib/Home/Root.svelte';
	import root from '$lib/Utility/root';
	import { addMessages, init, locale as i18nLocale } from 'svelte-i18n';
	import english from '$lib/Locale/english';
	import japanese from '$lib/Locale/japanese';
	import type { LocaleDictionary } from '$lib/Locale/layout';
	import locale from '$stores/locale';
	import Skeleton from '$lib/Loading/Skeleton.svelte';
	import subsPlease from '$stores/subsPlease';
	import Dropdown from '$lib/Dropdown.svelte';
	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
	import subtitles from '$lib/Data/subtitles.json';

	injectSpeedInsights();

	export let data;

	addMessages('en', english as unknown as LocaleDictionary);
	addMessages('ja', japanese as unknown as LocaleDictionary);
	init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });

	$: i18nLocale.set($settings.displayLanguage);

	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();
	});

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

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

				localStorage.removeItem('redirect');
			}

			if (localStorage.getItem('commit') !== data.commit) {
				localStorage.removeItem('identity');
				localStorage.removeItem('anime');
				localStorage.removeItem('manga');
				localStorage.removeItem('lastPruneTimes');
				localStorage.setItem('commit', data.commit);
			}
		}

		settings.get();

		if (data.user !== undefined)
			getUserIdentity(data.user).then((h) => {
				if ($userIdentity.id === -2) userIdentity.set(h);
			});
	});

	$: {
		if ((data.url === '/' || data.url === '/completed' || data.url === '/schedule') && !$subsPlease)
			fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`))
				.then((r) => r.json())
				.then((r) => {
					for (const day in subtitles) {
						if (!r.schedule[day]) r.schedule[day] = [];

						subtitles[day as keyof typeof subtitles].forEach((episode: any) => {
							r.schedule[day].push({
								title: episode.title,
								page: episode.page || '',
								image_url: episode.image_url || '',
								time: episode.time
							});
						});
					}

					subsPlease.set(r);
				});
	}
</script>

<HeadTitle />

<div id="container">
	<div id="header" class="card card-centered">
		<div>
			<a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
				href={root('/completed')}
				class="header-item"
			>
				{$locale().navigation.completed}
			</a>
			<Dropdown
				items={[
					{ name: $locale().navigation.subtitleSchedule, url: root('/schedule') },
					// { name: $locale().navigation.hololive, url: root('/hololive') },
					{ name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') },
					{ name: $locale().navigation.newReleases, url: root('/updates') }
				]}
				title={$locale().navigation.schedule}
			/>
			<a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
			<a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>

			<span class="header-item opaque">|</span>

			{#if data.user}
				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
					{$locale().navigation.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
						);
					}}
				>
					{$locale().navigation.logIn}
				</a>
			{:else}
				<a
					href={'#'}
					class="header-item"
					on:click={() => {
						localStorage.removeItem('identity');
						localStorage.removeItem('commit');

						document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

						window.location.href = root('/api/authentication/log-out');
					}}
				>
					{$locale().navigation.logOut}
				</a>
				{#if data.user}
					<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
						<img id="avatar" src={$userIdentity.avatar} alt="Avatar" />
					</a>
				{/if}
			{/if}
		</div>
	</div>

	<p />

	<Notifications item={Notification} zIndex={5000}>
		<Root {data} {way}>
			{#if $userIdentity.id !== -1}
				<slot />
			{:else if data.url === '/settings'}
				<Skeleton />
			{:else if data.url === '/tools'}
				<Skeleton count={1} height="75vh" />
			{:else if data.url === '/schedule'}
				<Skeleton grid={true} width="50%" count={2} height="25vh" />
			{:else}
				<Skeleton grid={true} width="50%" count={2} height="25vh" />
			{/if}
		</Root>
	</Notifications>
</div>

<style lang="scss">
	#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;
		z-index: 4;
	}

	#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;
	}

	: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>
