<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 } from '$lib/Media/Cover/hoverCover';
	import HoverCover from '$lib/Media/Cover/HoverCover.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 hovering = false;
	let hoveredMedia: Media | null = null;
	let imageStyle = '';

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

<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}
	<p>Loading prequels ... 50%</p>
{:then currentPrequels}
	<ul>
		{#each currentPrequels as prequel}
			<li
				on:mouseenter={() => {
					const response = onMouseEnter(prequel);

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

					hovering = response.hovering;
					hoveredMedia = response.media;
				}}
				on:mousemove={(e) => {
					const response = onMouseMove(e);

					imageStyle = response.style;
				}}
			>
				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
					<MediaTitle title={prequel.title} />
				</a>
				<span style="opacity: 50%;">|</span>
				{prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
				{@html prequelAiringTime(prequel)}
			</li>
		{/each}
	</ul>
{/await}

<p style="opacity: 50%;">
	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.
</p>

<HoverCover {hovering} {hoveredMedia} {imageStyle} />
