<script lang="ts">
	import './layout.css';
	import ControlButton       from '$lib/components/ControlButton.svelte';
	import SearchBar           from '$lib/components/SearchBar.svelte';
	import ConversationPreview from '$lib/components/ConversationPreview.svelte';
	import NoConversation      from '$lib/components/NoConversation.svelte';
	import settingsIcon from '$lib/assets/icons/settings.svg?raw';
	import newIcon      from '$lib/assets/icons/new.svg?raw';
	import { goto } from "$app/navigation";
	import {
		GetVersion,
		GetUserContact,
		NewConversation,
		GetAllContactsSorted,
		GetAllConversations,
		EstablishMailConnections,
		FullRefresh,
	} from "$lib/wailsjs/go/main/App";
	import { EventsOn } from "$lib/wailsjs/runtime/runtime";
	import { global } from "$lib/global.svelte.js";

	let { children } = $props();

	const version = await GetVersion();
	
	global.contact  = await GetUserContact();
	global.contacts = await GetAllContactsSorted();
	global.conversations = await GetAllConversations();

	const statusLineQueue = $state([]);
	setTimeout(() =>
		setInterval(() =>
			statusLineQueue.shift(),
			1000),
		5000);
	EventsOn("status", message => {
		console.log(message);
		statusLineQueue.push(message);
	})

	EventsOn("reload", async () => {
		global.contacts = await GetAllContactsSorted();
		global.conversations = await GetAllConversations();
	});

	async function add_new_conversation() {
		const conversation = await NewConversation();
		global.conversation = conversation;
		global.conversations = [conversation, ...global.conversations.filter(conv => conv.ID !== 0)];
		goto("/")
	}
</script>

<main class="flex flex-col w-[100vw] h-[100vh] text-primary">
	<div class="flex w-full h-full">
	<nav class="bg-sidebar w-1/4 h-full">
		<section class="flex flex-col gap-2 p-2">
			<div class="flex justify-between">
				<button class="text-xs" onclick={FullRefresh}>{version}</button>
				<div class="flex gap-4">				
					<ControlButton icon={settingsIcon}
								   onclick={() => goto("/settings")} />
						<ControlButton icon={newIcon}
									   onclick={add_new_conversation}/>
				</div>					
			</div>
			<SearchBar />
		</section>
		<ol class="p-2">
			{#each global.conversations as conversation (conversation.ID)}
				<li>
					<ConversationPreview {conversation} />
				</li>
			{:else}
				<NoConversation />
			{/each}
		</ol>
	</nav>
	<section class="w-full h-full">
		{@render children()}
	</section>
	</div>
	<div class="w-full h-4 border-2 border-sidebar text-xs px-1">{statusLineQueue[0]}</div>
</main>