<script lang="ts">
	/* eslint svelte/no-at-html-tags: "off" */

	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
	import { onDestroy, onMount } from 'svelte';
	import anime from '../../../stores/anime';
	import settings from '../../../stores/settings';
	import lastPruneTimes from '../../../stores/lastPruneTimes';
	import { airingTime, cleanCache, totalEpisodes } from '$lib/anime';

	export let user: AniListAuthorisation;
	export let identity: UserIdentity;
	export let displayUnresolved: boolean;

	let animeLists: Promise<Media[]>;
	let startTime: number;
	let endTime: number;

	const keyCacher = setInterval(() => {
		startTime = performance.now();
		endTime = -1;
		animeLists = mediaListCollection(
			user,
			identity,
			Type.Anime,
			$anime,
			$lastPruneTimes.anime,
			true
		);
	}, $settings.cacheMinutes * 1000 * 60);

	onMount(async () => {
		startTime = performance.now();
		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
	});

	onDestroy(() => {
		clearInterval(keyCacher);
	});

	const cleanMedia = (media: Media[], displayUnresolved: boolean) => {
		if (media === undefined) {
			return [];
		}

		const releasingMedia = media.filter(
			(media: Media) =>
				media.status == 'RELEASING' &&
				(media.mediaListEntry || { status: 'DROPPED' }).status !=
					($settings.displayPausedMedia ? '' : 'PAUSED') &&
				(media.mediaListEntry || { progress: 0 }).progress >=
					($settings.displayNotStarted === true ? 0 : 1)
		);
		const outdatedMedia = releasingMedia.filter((media: Media) => {
			return (
				(media.nextAiringEpisode || { episode: 0 }).episode - 1 !=
				(media.mediaListEntry || { progress: 0 }).progress
			);
		});
		let finalMedia = outdatedMedia.map((media: Media) => {
			if ((media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0) {
				media.nextAiringEpisode = { episode: -1 };
			}

			return media;
		});

		if (!displayUnresolved) {
			finalMedia = finalMedia.filter((media: Media) => media.nextAiringEpisode?.episode !== -1);
		}

		finalMedia.sort((a: Media, b: Media) => {
			if ($settings.sortByDifference === true) {
				const difference = (anime: Media) => {
					return (
						(anime.nextAiringEpisode?.episode === -1
							? 99999
							: anime.nextAiringEpisode?.episode || -1) -
						(anime.mediaListEntry || { progress: 0 }).progress
					);
				};

				return difference(a) - difference(b);
			} else {
				return (
					(a.nextAiringEpisode?.timeUntilAiring || 9999) -
					(b.nextAiringEpisode?.timeUntilAiring || 9999)
				);
			}
		});

		finalMedia = finalMedia.filter((item, index, array) => {
			return (
				array.findIndex((i) => {
					return i.id === item.id;
				}) === index
			);
		});

		if (!endTime || endTime === -1) {
			endTime = performance.now() - startTime;
		}

		return finalMedia;
	};

	const updateMedia = async (id: number, progress: number | undefined) => {
		fetch(`/anilist/increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
			animeLists = cleanCache(user, identity);
		});
	};
</script>

{#await animeLists}
	<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>

	<ul><li>Loading ...</li></ul>
{:then media}
	{@const cleanedMedia = cleanMedia(media, displayUnresolved)}

	<summary
		>Anime [{cleanedMedia.length}]
		<small style="opacity: 50%">{endTime / 1000}s</small></summary
	>

	{#if cleanedMedia.length === 0}
		<ul>
			<li>
				No anime to display. <a
					href={'#'}
					on:click={() => (animeLists = cleanCache(user, identity))}>Force refresh</a
				>
			</li>
		</ul>
	{/if}

	<ul>
		{#each cleanedMedia as anime}
			<li>
				<a
					href={$settings.linkToAniList
						? `https://anilist.co/anime/${anime.id}`
						: `https://www.livechart.me/search?q=${
								anime.title.native || anime.title.english || anime.title.romaji
						  }`}
					target="_blank"
				>
					{anime.title.english || anime.title.romaji || anime.title.native}
				</a>
				<span style="opacity: 50%;">|</span>
				{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
				<a href={'#'} on:click={() => updateMedia(anime.id, anime.mediaListEntry?.progress)}>+</a>
				[{anime.nextAiringEpisode?.episode === -1
					? '?'
					: (anime.nextAiringEpisode?.episode || 1) - 1}]
				{@html airingTime(anime)}
			</li>
		{/each}
	</ul>
{:catch}
	<summary>Anime [?] <small style="opacity: 50%">0s</small></summary>

	<ul>
		<li>
			<p>
				Media could not be loaded. You might have been <a
					href="https://en.wikipedia.org/wiki/Rate_limiting"
					target="_blank">rate limited</a
				>.
			</p>
			<p>
				Try again in a few minutes. If the problem persists, please contact
				<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
			</p>
		</li>
	</ul>
{/await}
