<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';

	export let data;

	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
	let tool =
		browser && urlParameters?.size !== 0 ? urlParameters?.get('tool') || 'default' : 'default';
	const tools: { [key: string]: string } = {
		default: 'Default',
		todays_character_birthdays: "Today's Character Birthdays",
		activity_history: 'Activity History',
		wrapped: 'Wrapped',
		episode_discussion_collector: 'Episode Discussion Collector (Beta)',
		sequel_spy: 'Sequel Spy'
	};

	$: {
		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="todays_character_birthdays">Today's Character Birthdays</option>
		<option value="activity_history">Activity History</option>
		<option value="wrapped">Wrapped</option>
		<option value="episode_discussion_collector">Episode Discussion Collector (Beta)</option>
		<option value="sequel_spy">Sequel Spy</option>
	</select>
</blockquote>

{#if !Object.keys(tools).includes(tool)}
	<p>Tool not found.</p>

	<blockquote>
		Did you mean "<a
			href={`?tool=${suggestion}`}
			style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
		>
			{suggestion === '...' ? '...' : tools[suggestion]}</a
		>"?
	</blockquote>
{:else if tool === 'default'}
	Select a tool to continue.
{:else if tool === 'activity_history'}
	<ActivityHistory user={data.user} />
{:else if tool === 'wrapped'}
	<Wrapped user={data.user} />
{:else if tool === 'episode_discussion_collector'}
	<EpisodeDiscussionCollector />
{:else if tool === 'todays_character_birthdays'}
	<CharacterBirthdays />
{:else if tool === 'sequel_spy'}
	<SequelSpy user={data.user} />
{/if}
