<script lang="ts">
	import type { ListsResponse } from '$lib/pocketbase-types';
	import type { PageData } from './$types';

	export let data: PageData;

	const rootLists = data.lists.filter((l) => !l.parent);
	const children = data.lists.reduce((acc, l) => {
		if (acc.has(l.parent)) {
			acc.get(l.parent)?.push(l);
		} else {
			acc.set(l.parent, [l]);
		}
		return acc;
	}, new Map<string, ListsResponse[]>());

	// TODO: Replace with navigation logic, such as using a Svelte store or a Router
	const goToTasks = (taskId: string) => {
		console.log(`Redirecting to tasks for list ${taskId}`);
	};
</script>

<ion-header>
	<ion-toolbar>
		<ion-title>Task Lists</ion-title>
	</ion-toolbar>
</ion-header>
<ion-content>
	<ion-list>
		{#each rootLists as list}
			<ion-item lines="full">
				<ion-label>
					<h2>{list.name}</h2>
					<ion-list>
						{#each children.get(list.id) as childList}
							<ion-item lines="full">
								<ion-label>
									<h2>{childList.name}</h2>
								</ion-label>
							</ion-item>
						{/each}
					</ion-list>
				</ion-label>
			</ion-item>
		{/each}
	</ion-list>
</ion-content>

<style>
	/* Additional styles if necessary */
</style>
