<script lang="ts">
	import ActivityHistory from '$lib/Tools/ActivityHistory.svelte';
	import { todaysCharacterBirthdays } from '$lib/AniList/character';
	import Wrapped from '$lib/Tools/Wrapped.svelte';
	import { browser } from '$app/environment';
	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';

	export let data;

	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
	let tool = browser && urlParameters?.size !== 0 ? urlParameters?.get('tool') : 'default';
</script>

<p>
	<select bind:value={tool}>
		<option value="default" selected disabled hidden>Tool</option>
		<option value="todays_character_birthdays">Today's Character Birthdays</option>
		<option value="activity_history_hole_risks">Activity History Hole Risks</option>
		<option value="wrapped">Wrapped (Beta)</option>
		<option value="episode_discussion_collector">Episode Discussion Collector (Beta)</option>
	</select>
</p>

{#if tool === 'default'}
	Select a tool to continue.
{:else if tool === 'activity_history_hole_risks'}
	<ActivityHistory user={data.user} />
{:else if tool === 'wrapped'}
	<div id="wrapped"><Wrapped user={data.user} /></div>
{:else if tool === 'episode_discussion_collector'}
	<EpisodeDiscussionCollector />
{:else if tool === 'todays_character_birthdays'}
	<ul>
		{#await todaysCharacterBirthdays()}
			<li>Loading ...</li>
		{:then birthdays}
			{#each birthdays as birthday}
				<li>
					<a href={`https://anilist.co/character/${birthday.id}`} target="_blank"
						>{birthday.name.full}</a
					>
				</li>
			{/each}
		{:catch}
			<li>
				<p>
					Characters 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>
		{/await}
	</ul>
{/if}

<style>
	#wrapped {
		width: 980px;
	}
</style>
