<script lang="ts">
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import FitnessAssistantDrawer from '$lib/components/assistant/FitnessAssistantDrawer.svelte';

	let { children, data } = $props();
	let commandOpen = $state(false);
	const visibleApps = data?.visibleApps || ['trips', 'fitness', 'inventory', 'budget', 'reader', 'media'];
	const userName = data?.user?.display_name || '';

	function openCommand() {
		commandOpen = true;
	}

	function closeCommand() {
		commandOpen = false;
	}

	function handleKeydown(e: KeyboardEvent) {
		if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
			e.preventDefault();
			commandOpen = !commandOpen;
		}
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<AppShell onOpenCommand={openCommand} {visibleApps} {userName}>
	{@render children()}
</AppShell>

<FitnessAssistantDrawer bind:open={commandOpen} onclose={closeCommand} />
