<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/CharacterBirthdays.svelte';
	import { page } from '$app/stores';
	import SequelSpy from '$lib/Tools/SequelSpy.svelte';

	export let data;

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

	$: {
		if (browser) {
			$page.url.searchParams.set('tool', tool);
			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
		}
	}
</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 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}
