<script lang="ts">
	import { api } from "astro-typesafe-api/client";
	import { getClose } from "svelte-dialogs";

	const close = getClose();

	async function createTicket(e: SubmitEvent) {
		e.preventDefault();
		try {
			await api.ticket.PUT.fetch({
				beschreibung: description,
				email: email,
				metadata: {
					category: category,
					phone: phone,
				},
				titel: title,
			})
			// Ticket wurde erfolgreich erstellt
			close(true)
		} catch (e) {
			// Beim erstellen des Tickets ist ein Fehler aufgetreten, das ist ja mal ironisch...
			close(false)
		}
	}

	let category = "";
	let title = "";
	let description = "";
	let email = "";
	let phone = "";
</script>

<form class="max-w-lg" on:submit={createTicket}>
	<h1 class="text-2xl font-semibold mb-6">Ticket erstellen</h1>
	<p class="mb-6">
		Vielen Dank, dass sie sich die Zeit nehmen ein Support Ticket zu
		erstellen. Wir werden uns schnellstmöglich um ihre Angelegenheit
		kümmern. Hier können sie alle Details eintragen und uns ihr Problem
		schildern.
	</p>
	<div class="flex flex-col gap-4">
		<div>
			<h4>Kategorie *</h4>
			<select class="select select-bordered" bind:value={category}>
				<option value={null} disabled selected>Bitte Auswählen</option>
				<option value="Technischer Fehler">Technischer Fehler</option>
				<option value="Fehlende Funktionalität"
					>Fehlende Funktionalität</option
				>
			</select>
		</div>
		<div>
			<h4>Überschrift *</h4>
			<input
				class="input input-bordered"
				type="text"
				placeholder="Überschrift in einem Satz"
				name="title"
				bind:value={title}
				required
			/>
		</div>
		<div>
			<h4>Beschreibung *</h4>
			<textarea
				cols="10"
				rows="5"
				class="textarea textarea-bordered"
				placeholder="Schildern sie hier ihre Erfahrung"
				bind:value={description}
				required
			></textarea>
		</div>
		<div class="flex flex-row gap-4">
			<div class="w-full">
				<h4>Email Adresse *</h4>
				<input
					class="input input-bordered"
					type="email"
					placeholder="Ihre Email Adresse"
					name="email"
					bind:value={email}
					required
				/>
			</div>
			<div class="w-full">
				<h4>Telefonnummer</h4>
				<input
					class="input input-bordered"
					type="tel"
					placeholder="Ihre Telefonnumer"
					name="phone"
					bind:value={phone}
					required
				/>
			</div>
		</div>
		<button class="btn btn-primary" type="submit">Abschicken</button>
	</div>
</form>
