<script lang="ts">
	import Input from '$lib/components/Input/Input.svelte';
	import { env } from '$env/dynamic/public';
	import Select from '$lib/components/Input/Select.svelte';
	import { errorMessage } from '$lib/stores';
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	let firstname: string;
	let lastname: string;
	let birthday: string;
	let phone: string;
	let username: string;
	let playertype = 'java';

	async function newUser() {
		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
			method: 'PUT',
			body: JSON.stringify({
				firstname: firstname,
				lastname: lastname,
				birthday: birthday,
				telephone: phone,
				username: username,
				playertype: playertype
			})
		});
		if (response.ok) {
			dispatch('submit', {
				firstname: firstname,
				lastname: lastname,
				birthday: birthday,
				telephone: phone,
				username: username,
				playertype: playertype
			});
			globalCloseForm.submit();
		} else {
			$errorMessage = (await response.json()).message;
		}
	}

	let globalCloseForm: HTMLFormElement;

	let reportForm: HTMLFormElement;
	let confirmDialog: HTMLDialogElement;
</script>

<form method="dialog" class="modal-box" bind:this={reportForm}>
	<button
		class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
		on:click|preventDefault={() => globalCloseForm.submit()}>✕</button
	>
	<h3 class="font-roboto text-xl">Neuer Spieler</h3>
	<div class="grid grid-cols-2 gap-4">
		<Input type="text" required bind:value={firstname}>
			<span slot="label">Vorname</span>
		</Input>
		<Input type="text" required bind:value={lastname}>
			<span slot="label">Nachname</span>
		</Input>
		<Input type="date" required bind:value={birthday}>
			<span slot="label">Geburtstag</span>
		</Input>
		<Input type="tel" bind:value={phone}>
			<span slot="label">Telefonnummer</span>
		</Input>
		<Input type="text" required bind:value={username}>
			<span slot="label">Minecraft-Spielername</span>
		</Input>
		<Select required label="Edition" bind:value={playertype}>
			<option value="java">Java Edition</option>
			<option value="bedrock">Bedrock Edition</option>
		</Select>
	</div>
	<div class="flex flex-row space-x-2 mt-6">
		<Input
			type="submit"
			value="Hinzufügen"
			on:click={(e) => {
				if (reportForm.checkValidity()) {
					e.detail.preventDefault();
					confirmDialog.show();
				}
			}}
		/>
		<Input
			type="submit"
			value="Abbrechen"
			on:click={(e) => {
				e.detail.preventDefault();
				globalCloseForm.submit();
			}}
		/>
	</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
	<button>close</button>
</form>

<dialog class="modal" bind:this={confirmDialog}>
	<form method="dialog" class="modal-box">
		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
		<h3 class="font-roboto text-xl mb-2">Spieler hinzufügen?</h3>
		<div class="flex flex-row space-x-2 mt-6">
			<Input type="submit" value="Hinzufügen" on:click={newUser} />
			<Input type="submit" value="Abbrechen" />
		</div>
	</form>
	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
		<button>close</button>
	</form>
</dialog>
