<script lang="ts">
	import type { MessageResponseBodyData } from '$lib/types/dtos/message/MessageResponseBodyData';
	import type { MinibusserviceResponseBody } from '$lib/types/dtos/MinibusserviceResponseBody';
	import Button from './button/Button.svelte';
	import Link from './link/Link.svelte';
	import MapPoint from './MapPoint.svelte';
	import { toast } from './toast/toast';

	let buttonDisabled = false;

	let name = '';
	let email = '';
	let phone = '';
	let message = '';
	let posting = false;

	async function sendMessage() {
		if (!(name && email && message)) {
			toast.warning('Alle påkrevde felt må fyllest inn');
			return;
		}

		posting = true;
		buttonDisabled = true;

		try {
			let res = await fetch('/api/v1/message', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					name,
					email,
					phone,
					message
				})
			});

			let data: MinibusserviceResponseBody<MessageResponseBodyData> = await res.json();
			if (res.ok) {
				toast.success(data.message);
			} else {
				console.error(data.message);
				toast.error(data.message);
			}
		} catch (err) {
			console.error(err);
			buttonDisabled = false;
			toast.error('En feil oppstod under sending av meldingen');
		} finally {
			posting = false;
		}
	}
</script>

<div class="mt-2 flex flex-col gap-8 md:flex-row md:text-lg">
	<div class="flex flex-1 flex-col">
		<p class="block pt-2 font-medium opacity-70 md:hidden">
			Spørsmål?<br />Kontakt oss via tlf, e-post eller via skjemaet under
		</p>
		<p class="hidden pt-2 font-medium opacity-70 md:block">
			Spørsmål?<br />Kontakt oss via tlf, e-post eller via skjemaet til høyre
		</p>
		<Link class="w-fit font-bold text-accent hover:underline" href="tel:45256161">
			Tlf: +47 45 25 61 61
		</Link>
		<Link class="w-fit font-bold text-accent hover:underline" href="mailto:minibusstur@hotmail.com">
			E-post: minibusstur@hotmail.com
		</Link>

		<MapPoint
			class="card mt-5 min-h-96 grow overflow-hidden rounded-md border-2"
			coordinates={[
				{
					latitude: 62.48303957042255,
					longitude: 6.8108274964451745
				}
			]}
		/>
	</div>

	<form
		on:submit|preventDefault={sendMessage}
		class="flex flex-1 flex-col gap-4 pt-4 text-xl md:pt-0"
	>
		<label>
			<span class="text-xl font-semibold">
				<span class="text-accent"> * </span>
				Navn
			</span>
			<input required bind:value={name} placeholder="Navn" class="bg-primary-100" type="text" />
		</label>
		<label>
			<span class="text-xl font-semibold">
				<span class="text-accent"> * </span>
				E-post
			</span>
			<input
				required
				bind:value={email}
				placeholder="E-postadresse"
				class="bg-primary-100"
				type="email"
			/>
		</label>
		<label>
			<span class="text-xl font-semibold">Telefonnummer</span>
			<input bind:value={phone} placeholder="Telefonnummer" class="bg-primary-100" type="tel" />
		</label>
		<label>
			<span class="text-xl font-semibold">
				<span class="text-accent"> * </span>
				Melding
			</span>
			<textarea required bind:value={message} class="h-60 bg-primary-100" placeholder="Melding" />
		</label>
		<div>
			<Button class="w-full" disabled={buttonDisabled} loading={posting} type="submit">Send</Button>
		</div>
	</form>
</div>
