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

	export let reporterName: string;
	export let reportedName: string | null;
	export let reason: string;
	export let users: string[];

	let oldReported = reportedName;
	$: reportedName = oldReported;

	let body: string;
	let userErrorModal: HTMLDialogElement;
	let submitModal: HTMLDialogElement;

	let dispatch = createEventDispatcher();

	async function submitReport() {
		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
			method: 'POST',
			body: JSON.stringify({
				reported: reportedName || null,
				subject: reason,
				body: body
			})
		});
	}

	async function suggestNames(input: string): Promise<{ name: string; value: string }[]> {
		let i = 0;
		return users
			.filter((v) => v.includes(input) && v != reporterName && i++ < 6)
			.map((v) => {
				return { name: v, value: v };
			});
	}
</script>

<div>
	<h2 class="text-3xl text-center">
		Report von <span class="underline">{reporterName}</span> gegen
		<span class="underline">{(reportedName ?? 'unbekannt') || oldReported}</span>
	</h2>
	<form
		on:submit|preventDefault={() => {
			if (reportedName != null && users.findIndex((u) => u === reportedName) === -1) {
				userErrorModal.show();
			} else {
				submitModal.show();
			}
		}}
	>
		<div class="space-y-4 my-4">
			<div class="flex justify-center gap-4">
				<Select
					value={+(reportedName === null)}
					size="sm"
					pickyWidth={false}
					on:change={(e) => (reportedName = e.detail.value === 0 ? '' : null)}
				>
					<option value={0}>Ich möchte einen bestimmten Spieler reporten</option>
					<option value={1}>Ich möchte einen unbekannten Spieler reporten</option>
				</Select>
				{#if reportedName !== null}
					<Search size="sm" bind:value={oldReported} searchSuggestionFunc={suggestNames} />
				{/if}
			</div>
			<div>
				<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
					<span slot="label">Report Grund</span>
				</Input>
			</div>
			<div>
				<Textarea
					required={true}
					rows={4}
					label="Details über den Report Grund"
					bind:value={body}
				/>
			</div>
		</div>
		<div>
			<Input type="submit" value="Reporten" />
		</div>
	</form>
</div>

<dialog class="modal" bind:this={userErrorModal}>
	<form method="dialog" class="modal-box">
		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
		<div>
			<h3 class="font-roboto font-medium text-xl">Fehler</h3>
			<div class="my-4">
				<p>Der zu reportende Spieler existiert nicht</p>
			</div>
			<div class="flex flex-row space-x-1">
				<Input type="submit" value="Schließen" />
			</div>
		</div>
	</form>
	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
		<button>close</button>
	</form>
</dialog>

<dialog class="modal" bind:this={submitModal}>
	<form method="dialog" class="modal-box">
		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
		<div>
			<h3 class="font-roboto font-medium text-xl">Report abschicken?</h3>
			<div class="my-4">
				<p>Nach dem Abschicken des Reports wird sich ein Admin schnellstmöglich darum kümmern.</p>
			</div>
			<div class="flex flex-row space-x-1">
				<Input
					type="submit"
					value="Abschicken"
					on:click={async () => {
						await submitReport();
						dispatch('submit');
					}}
				/>
				<Input type="submit" value="Abbrechen" />
			</div>
		</div>
	</form>
	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
		<button>close</button>
	</form>
</dialog>
