<script lang="ts">
	import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
	import SelectedGameStore from '$lib/stores/GameFilter';

	let selectedGameGroups: Array<string> = [];
	let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
	let selectedGame: string = "";

	SelectedGameStore.subscribe((selection) => {
		selectedGame = selection;
		console.log(selectedGameGroupsMap.size);
		if (selectedGameGroupsMap.size != 0) {
			const tmp = selectedGameGroupsMap.get(selectedGame);
			if (typeof tmp !== "undefined") {
				selectedGameGroups = [...tmp.values()];
			}
		}
	});

	SelectedGameGroupsStore.subscribe((selection) => {
		selectedGameGroupsMap = selection;
		const tmp = selection.get(selectedGame);
		if (typeof tmp !== 'undefined') {
			selectedGameGroups = [...tmp.values()];
		}
	});

</script>

<svelte:head>
	<title>Graphs</title>
	<meta name="description" content="Chellaris Sign-Up Graphs" />
</svelte:head>

<h1>Example Tab</h1>

<p>{selectedGameGroups.length > 1 ? "Groups" : "Group"} {selectedGameGroups.join(", ")} {selectedGameGroups.length > 1 ? "are" : "is"} selected</p>