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

	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
	import type { Media } from '$lib/AniList/media';
	import Error from '$lib/Error.svelte';
	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
	import settings from '../../stores/settings';
	import ListTitle from './ListTitle.svelte';

	export let endTime: number;
	export let cleanMedia: (media: Media[], displayUnresolved: boolean) => Media[];
	export let animeLists: Promise<Media[]>;
	export let user: AniListAuthorisation;
	export let identity: UserIdentity;
	export let title: string;
</script>

{#await animeLists}
	<ListTitle custom={title} />

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

	<ListTitle time={endTime / 1000} count={cleanedMedia.length} custom={title} />

	{#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>
				{#if title === 'Upcoming Episodes'}
					<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
					{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
					<a
						href={'#'}
						on:click={() =>
							updateMedia(
								anime.id,
								anime.mediaListEntry?.progress,
								() => (animeLists = cleanCache(user, identity))
							)}>+</a
					>
					{#if !title.includes('Completed')}
						[{anime.nextAiringEpisode?.episode === -1
							? '?'
							: (anime.nextAiringEpisode?.episode || 1) - 1}]
						{@html airingTime(anime)}
					{/if}
				{:else}
					{@html airingTime(anime, true)}
				{/if}
			</li>
		{/each}
	</ul>
{:catch}
	<ListTitle time={0} count={'?'} custom={title} />

	<Error />
{/await}
