<script lang="ts">
	import type { MediaPrequel } from '$lib/Data/AniList/prequels';
	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
	import { airingTime } from '$lib/Media/Anime/Airing/time';
	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
	import settings from '$stores/settings';
	import type { Media } from '$lib/Data/AniList/media';

	export let currentPrequels: MediaPrequel[];

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

<ul>
	{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
		<li id={`${prequel.id}`}>
			<LinkedTooltip
				content={`<img src="${
					$settings.displayDataSaver ? prequel.coverImage.medium : prequel.coverImage.extraLarge
				}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
				pin={`${prequel.id}`}
				pinPosition="top"
				disable={!$settings.displayHoverCover}
			>
				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
					<MediaTitleDisplay title={prequel.title} />
				</a>
				<span class="opaque">|</span>
				{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
				{@html prequelAiringTime(prequel)}
			</LinkedTooltip>
		</li>
	{/each}
</ul>
