<script lang="ts">
	import GenericInput from "$lib/components/GenericInput.svelte";
	import { goto } from "$app/navigation";
	import { GetMailConnections, SaveMailConnection, EstablishMailConnections } from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";

	const connections = await GetMailConnections();
	
	function edit_contact_card() {
		global.contact = userContact;
		goto("/contact");
	}

	async function preventDefault(event) {
		event.preventDefault();
		for (const conn of connections) {
			await SaveMailConnection(conn).catch(err => {
				alert(err);
				return;
			});
		}
		EstablishMailConnections();
		goto("/settings");
	}
</script>

<form class="flex flex-col p-4 w-full h-full overflow-scroll" onsubmit={preventDefault}>
	<section class="flex flex-col gap-8 text-xs w-1/2">
		<h1>Mail Account Settings</h1>
		{#each connections as conn}
			<h2>Account Settings for <span class="font-bold">{conn.Email}</span></h2>
			<fieldset class="field-group">
				<section class="flex flex-col gap-4">
					<h3>IMAP Settings</h3>
					<fieldset>
						<label>Server <GenericInput bind:value={conn.ImapServer} /></label>
						<label>Port <GenericInput type="number" bind:value={conn.ImapPort} /></label>
					</fieldset>
					<label>Username <GenericInput bind:value={conn.ImapUsername} /></label>
				</section>
				<section class="flex flex-col gap-4">
					<h3>SMTP Settings</h3>
					<fieldset>
						<label>Server <GenericInput bind:value={conn.SmtpServer} /></label>
						<label>Port <GenericInput type="number" bind:value={conn.SmtpPort} /></label>
					</fieldset>
					<label>Username <GenericInput bind:value={conn.SmtpUsername} /></label>
				</section>
				<label>Password <GenericInput type="password" bind:value={conn.Password} /></label>
			</fieldset>
		{:else}
			<h1 class="text-xl">You have no mail accounts setup. Edit your contact card and add mail accounts.</h1>
			<button class="text-button"
					type="button"
					onclick={edit_contact_card}>Click here to edit contact card</button>
		{/each}
	</section>
	<input class="ml-auto text-button" type="submit" value="Done" />
</form>