<script lang="ts">
	import { mediaListCollection, Type, flattenLists, type Media } from '$lib/AniList/media';
	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
	import { onMount } from 'svelte';

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

	let animeLists: any;
	let startTime: number;
	let endTime: number;

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

	const cleanMedia = (media: object[][], displayUnresolved: boolean) => {
		const flattenedLists = flattenLists(media);
		const releasingMedia = flattenedLists.filter((media: Media) => media['status'] == 'RELEASING');
		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) => {
			const difference = (anime: Media) => {
				return (
					(anime.nextAiringEpisode?.episode === -1
						? 99999
						: anime.nextAiringEpisode?.episode || -1) -
					(anime['mediaListEntry'] || { progress: 0 })['progress']
				);
			};

			return difference(a) - difference(b);
		});

		finalMedia = finalMedia.filter((item, index, array) => {
			return (
				array.findIndex((i) => {
					return i.id === item.id;
				}) === index
			);
		});
		endTime = performance.now() - startTime;

		return finalMedia;
	};

	const airingTime = (anime: Media) => {
		const untilAiring = anime.nextAiringEpisode?.timeUntilAiring;
		let timeFrame;

		if (untilAiring !== undefined) {
			let hours = untilAiring / 3600;

			if (hours >= 24) {
				let weeks = Math.floor(Math.floor(hours / 24) / 7);

				if (weeks >= 1) {
					weeks = Math.round(weeks);

					timeFrame = `${weeks} week${weeks === 1 ? '' : 's'}`;
				} else {
					const days = Math.round(Math.floor(hours / 24));

					timeFrame = `${days} day${days === 1 ? '' : 's'}`;
				}
			} else {
				hours = Math.round(hours);

				timeFrame = `${hours} hour${hours === 1 ? '' : 's'}`;
			}

			return `<span style="opacity: 50%">${anime.nextAiringEpisode?.episode} in ${timeFrame}</span>`;
		}

		return '';
	};

	const totalEpisodes = (anime: Media) => {
		return anime['episodes'] === null
			? ''
			: `<span style="opacity: 50%">/${anime['episodes']}</span>`;
	};

	const updateMedia = async (id: number, progress: number | undefined) => {
		animeLists = mediaListCollection(user, identity, Type.Anime);

		await fetch(`/anilist/increment?id=${id}&progress=${progress! + 1}`);
	};
</script>

{#await animeLists}
	<summary>Anime</summary>

	<ul><li>Loading ...</li></ul>
{:then media}
	<summary
		>Anime [{cleanMedia(media, displayUnresolved).length}]
		<small style="opacity: 50%">{endTime / 1000}s</small></summary
	>

	<ul>
		{#each cleanMedia(media, displayUnresolved) as anime}
			<li>
				<a href={`https://anilist.co/anime/${anime['id']}`} target="_blank">
					{anime['title']['english'] || anime['title']['romaji']}
				</a>
				{(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>
{/await}
