<script lang="ts">
	import ActivityHistory from '$lib/Tools/ActivityHistory/Tool.svelte';
	import Wrapped from '$lib/Tools/Wrapped.svelte';
	import { browser } from '$app/environment';
	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
	import CharacterBirthdays from '$lib/Tools/Birthdays.svelte';
	import { page } from '$app/stores';
	import SequelSpy from '$lib/Tools/SequelSpy.svelte';
	import { closest } from '$lib/Error/path';
	import HeadTitle from '$lib/HeadTitle.svelte';
	import RandomFollower from '$lib/Tools/RandomFollower.svelte';

	export let data;

	let tool =
		browser && $page.url.searchParams.size !== 0
			? $page.url.searchParams.get('tool') || 'default'
			: 'default';
	const tools: { [key: string]: { name: string; description?: string } } = {
		default: {
			name: 'Tools',
			description: 'A collection of tools to help you get the most out of AniList.'
		},
		wrapped: {
			name: 'AniList Wrapped & Statistics Panel',
			description:
				'Instantly generate an AniList themed Wrapped for your profile, doubling as a statistics panel for your bio'
		},
		birthdays: {
			name: "Today's Character Birthdays",
			description:
				'Find and display the birthdays of all characters for today, or any other day of the year'
		},
		sequel_spy: {
			name: 'Sequel Spy (Missing Prequel Finder)',
			description: "Find media with prequels you haven't seen yet for any given simulcast season"
		},
		discussions: {
			name: 'Episode Discussion Collector',
			description: 'Find and display all episode discussions for a given user'
		},
		random_follower: {
			name: 'Random Follower Finder',
			description: 'Find a random follower of any given user'
		},
		activity_history: {
			name: 'Activity History Analyser'
		}
	};

	$: {
		if (browser) {
			$page.url.searchParams.set('tool', tool);
			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
		}
	}
	$: suggestion = closest(browser ? tool : '...', Object.keys(tools));
</script>

<blockquote>
	<select bind:value={tool}>
		<option value="default" selected disabled hidden>Tool</option>
		<option value="wrapped">AniList Wrapped</option>
		<option value="birthdays">Today's Character Birthdays</option>
		<option value="sequel_spy">Sequel Spy</option>
		<option value="discussions">Episode Discussion Collector</option>
		<option value="random_follower">Random Follower Finder</option>
		<option value="activity_history">Activity History Analyser</option>
	</select>
</blockquote>

{#if !Object.keys(tools).includes(tool)}
	<HeadTitle route="Tools" path="/tools" />

	<p>Tool not found.</p>

	<blockquote>
		Did you mean "<a
			href={`#`}
			style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
			on:click={() => (tool = suggestion)}
		>
			{suggestion === '...' ? '...' : tools[suggestion]}</a
		>"?
	</blockquote>
{:else}
	<HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />

	{#if tool === 'default'}
		<p>Select a tool to continue.</p>

		<ul>
			{#each Object.keys(tools) as t}
				{#if t !== 'default'}
					<li>
						<a href={`#`} on:click={() => (tool = t)}>{tools[t].name}</a>
						{#if tools[t].description}
							<blockquote>{tools[t].description}</blockquote>
						{/if}
					</li>
				{/if}
			{/each}
		</ul>

		<p>
			Have any requests for cool tools that you think others might find useful? Send a message to
			<a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
		</p>
	{:else if tool === 'activity_history'}
		<ActivityHistory user={data.user} />
	{:else if tool === 'wrapped'}
		<Wrapped user={data.user} />
	{:else if tool === 'discussions'}
		<EpisodeDiscussionCollector />
	{:else if tool === 'birthdays'}
		<CharacterBirthdays />
	{:else if tool === 'sequel_spy'}
		<SequelSpy user={data.user} />
	{:else if tool === 'random_follower'}
		<RandomFollower />
	{/if}
{/if}
