<script lang="ts">
	import { goto } from "$app/navigation";
	import { global } from "$lib/global.svelte.js";

	let { fromContact, toContact } = $props();
	
	const fromName = `${fromContact.Firstname} ${fromContact.Lastname}`.trim();
	const toName = `${toContact.Firstname} ${toContact.Lastname}`.trim();
	
	async function check_from_select () {
 		const selected = fromSlct.options[fromSlct.selectedIndex];
 		if (selected && selected.id === 'editFromContact') {
			global.contact = fromContact;
 			goto("/contact");
 		}
	}
	async function check_to_select () {
 		const selected = toSlct.options[toSlct.selectedIndex];
 		if (selected && selected.id === 'editToContact') {
			global.contact = toContact;
 			goto("/contact");
 		}
	}
</script>

<div class="flex gap-2 text-xs">
	<span>From: {fromName}</span>
	<select id="fromSlct"
			onchange={check_from_select}>
		{#each fromContact.Emails as address}
			<option value={address.value}>&lt;{address.Value}&gt; ({address.Key})</option>
		{:else}
			<option>Nobody &lt;&gt;</option>
		{/each}
		<option id="editFromContact">Edit my contact card</option>
	</select>
	<span>To: {toName}</span>
	<select id="toSlct"
			onchange={check_to_select}>
		{#each toContact.Emails as address}
			<option value={address.value}>&lt;{address.Value}&gt; ({address.Key})</option>
		{:else}
			<option>Nobody &lt;&gt;</option>
		{/each}
		<option id="editToContact">Edit their contact card</option>
	</select>
</div>