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

	export let data;

	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
	let tool = 'default';

	onMount(() => {
		switch (browser && urlParameters?.size !== 0 ? urlParameters?.get('tool') : 'default') {
			case 'activity_history_hole_risks':
				tool = 'activity_history_hole_risks';
				break;
			case 'wrapped':
				tool = 'wrapped';
				break;
			case 'episode_discussion_collector':
				tool = 'episode_discussion_collector';
				break;
			case 'todays_character_birthdays':
				tool = 'todays_character_birthdays';
				break;
			default:
				tool = 'default';
				break;
		}
	});

	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>
	</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'}
	<CharacterBirthdays />
{/if}

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