<script lang="ts">
	import ContactSelector from '$lib/components/ContactSelector.svelte';
	import {
		GetUserContact,
		GetActiveMailEmails,
		GetRecipientDisplay,
	} from "$lib/wailsjs/go/main/App";
	import { goto } from "$app/navigation";
	import { global } from "$lib/global.svelte.js";

	let { conversation } = $props();

	const userContact = await GetUserContact();
	const activeEmails = await GetActiveMailEmails();
	
	let recipients = $state(conversation.Recipients || []);
	let recipientInfo = $state([]);
	$effect(async () => {
		if (global.conversation.Recipients) {
			global.conversation.Recipients[0] = conversation.ServerRecipient;
			global.fromAddress = conversation.ServerRecipient;
		}
		recipientInfo = await GetRecipientDisplay(conversation.Recipients).then(list => { if (list) return list.slice(1) });
	});
	
	
	function add_recipient(email) {
		if (recipients.some(r => r.ID === email.ID || r.Value === email.Value)) return;
		recipients.push(email);
	}

	function remove_recipient(index) {
		recipients = recipients.filter((_, i) => i !== index);
	}

	function handle_from_select(event) {
		const selected = event.target.options[event.target.selectedIndex];
		if (selected && selected.dataset.action === 'edit') {
			global.contact = userContact;
			goto("/contact");
		}
	}
</script>

<div class="flex gap-1 text-xs items-center w-full">
	<span class="flex items-center gap-1">
		From:
		{#if conversation.ID === 0}
			<select class="w-min"
					onchange={handle_from_select}
					bind:value={conversation.ServerRecipient}>
				{#each userContact.Emails as email}
					<option value={email}
							disabled={!activeEmails.includes(email.Value)}>
						&lt;{email.Value}&gt; ({email.Key})
					</option>
				{/each}
				{#if activeEmails.length === 0}
					<option value={{}} selected>Nobody</option>
				{/if}
				<option data-action="edit">Edit my contact card</option>
			</select>
		{:else}
			<p class="text-xs text-nowrap">{conversation.ServerRecipient.Value}</p>
		{/if}
	</span>

	<span class="flex items-center gap-1 w-full flex-wrap">
		To:
		<span class="flex items-center gap-1 flex-wrap">
			{#each recipientInfo as display, i}
				{#if conversation.ID === 0}
					<button
						class="text-center p-1 text-xs text-nowrap border-1 border-primary rounded"
						onclick={() => remove_recipient(i)}>
						{display} | &times;
					</button>
				{:else}
					<p class="text-xs text-nowrap">{display}</p>
				{/if}
			{/each}
		</span>
		{#if conversation.ID === 0}
			<ContactSelector onselect={add_recipient} />
		{/if}
	</span>
</div>