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

	let showPopupModal = getPopupModalShowFn();

	let content = $state('');
	let type = $state('feedback');

	async function submitFeedback() {
		await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
			method: 'POST',
			body: JSON.stringify({
				content: content,
				type: type
			})
		});
	}
</script>

<svelte:head>
	<title>Feedback & Kontakt</title>
</svelte:head>

<div>
	<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
	<form
		onsubmit={(e) => {
			e.preventDefault();

			showPopupModal({
				title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?`,
				text:
					type === 'feedback'
						? 'Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.'
						: 'Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt wurde, kannst du die Nachricht nicht mehr bearbeiten.',
				actions: [
					{
						text: 'Abschicken',
						action: () =>
							setTimeout(async () => {
								await submitFeedback();

								showPopupModal({
									title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt`,
									text:
										type === 'feedback'
											? 'Dein Feedback wurde abgeschickt.'
											: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.',
									actions: [{ text: 'Schließen' }],
									onClose: () => {
										content = '';
										type = 'feedback';
									}
								});
							}, 200)
					},
					{ text: 'Abbrechen' }
				]
			});
		}}
	>
		<div class="space-y-4 mt-6 mb-4">
			<Select size="sm" bind:value={type}>
				<option value="feedback">Feedback</option>
				<option value="contact">Kontakt</option>
			</Select>
			<Textarea
				required={true}
				rows={4}
				label={type === 'feedback' ? 'Feedback' : 'Anfrage'}
				bind:value={content}
			/>
			<div>
				<Input type="submit" disabled={type === '' || content === ''} value="Senden" />
			</div>
		</div>
	</form>
</div>
