<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';

	export let reportedName: string;
	export let reason: string;

	async function submitReport() {
		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_id}`, {
			method: 'POST'
		});
	}

	let dispatch = createEventDispatcher();

	let submitModal: HTMLDialogElement;
</script>

<div>
	<h2 class="text-3xl text-center">Report für <code>{reportedName}</code></h2>
	<form on:submit|preventDefault={() => submitModal.show()}>
		<div class="space-y-4 my-4">
			<div>
				<Input type="text" 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" />
			</div>
		</div>
		<div>
			<Input type="submit" value="Reporten" />
		</div>
	</form>
</div>

<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 Moderator 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>
