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

	const dispatch = createEventDispatcher();

	let reporter: string;
	let reported: string;
	let reason = '';
	let body = '';

	async function usernameSuggestions(username: string): Promise<{ name: string; value: string }[]> {
		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
			method: 'POST',
			body: JSON.stringify({
				limit: 6,
				search: username,
				slim: true
			})
		});
		const json: { username: string; uuid: string }[] = await response.json();
		return json.map((v) => {
			return { name: v.username, value: v.uuid };
		});
	}

	async function newReport() {
		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
			method: 'PUT',
			body: JSON.stringify({
				reporter: reporter,
				reported: reported,
				reason: reason,
				body: body || null
			})
		});
		if (response.ok) dispatch('submit', await response.json());
	}

	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 Report</h3>
	<div class="space-y-2 mt-2 px-1 max-h-[70vh] overflow-y-scroll">
		<div>
			<Search
				size="sm"
				suggestionRequired={true}
				searchSuggestionFunc={usernameSuggestions}
				label="Reporter"
				required={true}
				bind:value={reporter}
			/>
			<Search
				size="sm"
				suggestionRequired={true}
				searchSuggestionFunc={usernameSuggestions}
				label="Reporteter User"
				required={true}
				bind:value={reported}
			/>
		</div>
		<div class="divider mx-4 pt-3" />
		<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
			<span slot="label">Report Grund</span>
		</Input>
		<div>
			<Textarea rows={4} label="Details über den Report Grund" bind:value={body} />
		</div>
	</div>
	<div class="flex flex-row space-x-2 mt-6">
		<Input
			type="submit"
			value="Erstellen"
			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">Report Erstellen?</h3>
		{#if body}
			<p>
				Dadurch, dass bereits Details über den Report Grund hinzugefügt wurden, ist es nach dem
				Erstellen nicht mehr möglich, den Report Inhalt zu ändern
			</p>
		{:else}
			<p>
				Der Report wird als Entwurf gespeichert und kann nach dem Erstellen über den Report-Link
				bearbeitet werden
			</p>
		{/if}
		<div class="flex flex-row space-x-2 mt-6">
			<Input
				type="submit"
				value="Erstellen"
				on:click={async () => {
					await newReport();
					globalCloseForm.submit();
				}}
			/>
			<Input type="submit" value="Abbrechen" />
		</div>
	</form>
	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
		<button>close</button>
	</form>
</dialog>
