<script lang="ts">
	import { onMount } from 'svelte';
	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
	import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
	import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
	import userIdentity from '../stores/userIdentity';
	import settings from '../stores/settings';
	import { lastActivityDate } from '$lib/AniList/activity';
	import ListTitle from '$lib/List/ListTitle.svelte';

	export let data;

	let currentUserIdentity = { name: '', id: -1 };
	let lastActivityWasToday = true;

	onMount(async () => {
		if ($settings.limitListHeight) {
			document.querySelectorAll('.list').forEach((list) => {
				(list as HTMLElement).style.maxHeight = `calc(100vh - ${
					document.querySelector('#list-container')?.getBoundingClientRect().bottom
				}px + 1.1rem)`;
			});
		}

		if (data.user !== undefined) {
			if ($userIdentity === '') {
				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
			}

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;
			lastActivityWasToday =
				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();

			if (!lastActivityWasToday) {
				if ($settings.limitListHeight) {
					document.querySelectorAll('.list').forEach((list) => {
						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
							document.querySelector('#list-container')?.getBoundingClientRect().top
						}px) - 5rem)`;
					});
				}
			}
		}
	});

	const timeLeftToday = () => {
		const now = new Date();
		const currentHour = now.getHours();
		const currentMinute = now.getMinutes();
		const hoursLeft = 24 - currentHour;
		let minutesLeft = 0;
		let timeLeft = '';

		if (hoursLeft > 0) {
			minutesLeft = hoursLeft * 60 - currentMinute;
		} else {
			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
		}

		if (minutesLeft > 60) {
			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
		} else {
			timeLeft = `${minutesLeft} minutes`;
		}

		return timeLeft;
	};
</script>

{#if !lastActivityWasToday}
	<p>
		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
		to keep your streak!
	</p>
{/if}

<div id="list-container">
	{#if data.user === undefined}
		Please log in to view due media.
	{:else}
		<details open={!$settings.closeAnimeByDefault} class="list">
			{#if currentUserIdentity.id != -1}
				<UpcomingAnimeList user={data.user} identity={currentUserIdentity} />
			{:else}
				<ListTitle custom="Upcoming Episodes" />

				<ul><li>Loading ...</li></ul>
			{/if}
		</details>

		<details open={!$settings.closeAnimeByDefault} class="list">
			{#if currentUserIdentity.id != -1}
				<AnimeList user={data.user} identity={currentUserIdentity} />
			{:else}
				<ListTitle anime />

				<ul><li>Loading ...</li></ul>
			{/if}
		</details>

		<details open={!$settings.closeMangaByDefault} class="list">
			{#if currentUserIdentity.id != -1}
				<MangaListTemplate
					user={data.user}
					identity={currentUserIdentity}
					displayUnresolved={$settings.displayUnresolved}
					due={true}
				/>
			{:else}
				<ListTitle />

				<ul><li>Loading 0% ...</li></ul>
			{/if}
		</details>
	{/if}
</div>

<style>
	#list-container {
		display: flex;
		flex-wrap: wrap;
	}

	.list {
		overflow-y: auto;
		min-width: 300px;
		flex: 1 1 300px;
	}
</style>
