<script lang="ts">
	import settings from '../../../stores/settings';
	import type { Media } from '$lib/AniList/media';
	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
	import ListTitle from '../ListTitle.svelte';

	export let media: Media[];
	export let title: string;
	export let animeLists: Promise<Media[]>;
	export let user: AniListAuthorisation;
	export let identity: UserIdentity;
	export let endTime: number;
</script>

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

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

<ul>
	{#each media 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>
