<script lang="ts">
	import type { AniListAuthorisation } from '$lib/AniList/identity';
	import { prequels, type MediaPrequel } from '$lib/AniList/prequels';
	import MediaTitle from '$lib/List/MediaTitleDisplay.svelte';
	import { onMount } from 'svelte';
	import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
	import { airingTime } from '$lib/Media/Anime/Airing/time';
	import type { Media } from '$lib/AniList/media';
	import { page } from '$app/stores';
	import { browser } from '$app/environment';
	import { season as getSeason } from '$lib/Media/Anime/season';
	import {
		onMouseEnter,
		onMouseLeave,
		onMouseMove,
		type HoverCoverResponse
	} from '$lib/Media/Cover/hoverCover';
	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
	import Skeleton from '$lib/Loading/Skeleton.svelte';

	export let user: AniListAuthorisation;

	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
	let season = parseOrDefault(urlParameters, 'season', getSeason());
	let hoverCoverState: HoverCoverResponse = {};

	$: {
		if (year.toString().length === 4) currentPrequels = prequels(user, year, season);
	}
	$: {
		if (browser) {
			$page.url.searchParams.set('year', year.toString());
			$page.url.searchParams.set('season', season.toString());
			clearAllParameters(['year', 'season']);
			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
		}
	}

	onMount(() => clearAllParameters(['year', 'season']));

	const prequelAiringTime = (prequel: MediaPrequel) =>
		airingTime(prequel as unknown as Media, null);
</script>

{#if user === undefined}
	Please log in to view this page.
{:else}
	<div class="card">
		<p>
			<select bind:value={season}>
				<option value="WINTER">Winter</option>
				<option value="SPRING">Spring</option>
				<option value="SUMMER">Summer</option>
				<option value="FALL">Fall</option>
			</select>
			<input type="number" bind:value={year} />
		</p>

		{#await currentPrequels}
			<Skeleton card={false} count={5} height="0.9rem" list />
		{:then currentPrequels}
			<ul>
				{#each currentPrequels as prequel}
					<li>
						<a
							href={`https://anilist.co/anime/${prequel.id}`}
							target="_blank"
							on:mouseenter={() => {
								const response = onMouseEnter(prequel);

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mouseleave={() => {
								const response = onMouseLeave();

								hoverCoverState.hovering = response.hovering;
								hoverCoverState.item = response.item;
								hoverCoverState.media = response.media;
							}}
							on:mousemove={(e) => {
								const response = onMouseMove(e, 300);

								hoverCoverState.style = response.style;
							}}
						>
							<MediaTitle title={prequel.title} />
						</a>
						<span class="opaque">|</span>
						{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
						{@html prequelAiringTime(prequel)}
					</li>
				{/each}
			</ul>
		{/await}

		<p />

		The count ratio is the number of episodes you've seen of any direct prequels, and the total
		number of episodes of all direct prequels.
	</div>

	<HoverCover options={hoverCoverState} width={300} />
{/if}
