<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 Search from '$lib/components/Input/Search.svelte';
	import Select from '$lib/components/Input/Select.svelte';
	import { getPopupModalShowFn } from '$lib/context';

	let {
		reporterName = $bindable(),
		reportedName = $bindable(null),
		reason = $bindable(),
		body = $bindable(),
		users,
		onsubmit
	}: {
		reporterName: string;
		reportedName: string | null;
		reason: string;
		body: string;
		users: string[];
		onsubmit: () => void;
	} = $props();

	let showPopupModal = getPopupModalShowFn();

	let reported = $state(reportedName);

	async function submitReport() {
		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
			method: 'POST',
			body: JSON.stringify({
				reported: reported || 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">{reported !== null ? reported : 'unbekannt'}</span>
	</h2>
	<form
		onsubmit={(e) => {
			e.preventDefault();
			if (reported != null && users.findIndex((u) => u === reported) === -1) {
				showPopupModal({
					title: 'Fehler',
					text: 'Der zu reportende Spieler existiert nicht.',
					actions: [{ text: 'Schließen' }]
				});
			} else {
				showPopupModal({
					title: 'Report abschicken?',
					text: 'Nach dem Abschicken des Reports wird sich ein Admin schnellstmöglich darum kümmern.',
					actions: [
						{
							text: 'Abschicken',
							action: async () => {
								await submitReport();
								onsubmit();
							}
						},
						{ text: 'Abbrechen' }
					]
				});
			}
		}}
	>
		<div class="space-y-4 my-4">
			<div class="flex justify-center gap-4">
				<Select
					value={+(reported === null)}
					size="sm"
					pickyWidth={false}
					onChange={(e) => {
						reported = e.value === 0 ? reportedName || '' : 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 reported !== null}
					<Search size="sm" bind:value={reported} searchSuggestionFunc={suggestNames} />
				{/if}
			</div>
			<div>
				<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
					{#snippet label()}
						<span>Report Grund</span>
					{/snippet}
				</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>
