<script lang="ts">
	import ActivityHistory from '$lib/Tools/ActivityHistory.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 { goto } from '$app/navigation';
	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';

	const changeTool = (
		e: Event & {
			currentTarget: EventTarget & HTMLSelectElement;
		}
	) => {
		$page.url.searchParams.set('tool', (e.target as HTMLSelectElement)?.value);
		goto(`?${$page.url.searchParams.toString()}`);
	};
</script>

<p>
	<select bind:value={tool} on:change={changeTool}>
		<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>
		<option value="sequel_spy">Sequel Spy</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'}
	<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}
