<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 } from './tool';

	export let user: AniListAuthorisation;

	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
	let year = new Date().getFullYear();
	let season = (() => {
		if (new Date().getMonth() >= 0 && new Date().getMonth() <= 2)
			return 'WINTER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
		else if (new Date().getMonth() >= 3 && new Date().getMonth() <= 5)
			return 'SPRING' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
		else if (new Date().getMonth() >= 6 && new Date().getMonth() <= 8)
			return 'SUMMER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
		else if (new Date().getMonth() >= 9 && new Date().getMonth() <= 11)
			return 'FALL' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
		else return 'WINTER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
	})();

	$: currentPrequels = prequels(user, year, season);

	onMount(clearAllParameters);
</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 ...</p>
{:then currentPrequels}
	<ul>
		{#each currentPrequels as prequel}
			<li>
				<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>
			</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>
