<script lang="ts">
	import { superForm, message } from 'sveltekit-superforms/client';
	import { UserSchema } from '$lib/types/UserSchema';
	import { afterUpdate } from 'svelte';
	import { writable } from 'svelte/store';
	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';

	const initialFormData = {
		name: '',
		email: '',
		about: '',
		age: '',
		favoriteFood: '',
		slider: 0,
		toggle: false
	};

	const fields = ['name', 'email', 'about', 'age', 'favoriteFood', 'slider', 'toggle'];

	const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, {
		validators: UserSchema,
		warnings: {
			noValidationAndConstraints: false
		},
		validationMethod: 'oninput', // Trigger validation on input events
		// Set the clearOnSubmit option to clear both errors and message on submit
		clearOnSubmit: 'errors-and-message'
	});

	export const snapshot = { capture, restore };
	const successMessage = writable<string | null>(null);

	async function handleSubmit() {
		// Manually validate the form
		const validationResult = await validate();

		// Prevent submission if there are errors
		if (!validationResult.valid) {
			return;
		}

		// Here, we'll just log the form data
		console.log(form);

		// Set the success message after successful submission
		successMessage.set('Form submitted successfully!');
	}

	function handleReset() {
		// Reset the form and remove the message
		form.set({});
		successMessage.set(null);
	}

	// After update, scroll to the message container for better user experience
	afterUpdate(() => {
		const messageContainer = document.getElementById('message-container');
		if (messageContainer) {
			messageContainer.scrollIntoView({ behavior: 'smooth' });
		}
	});
</script>

<div class="flex items-center justify-center min-h-screen overflow-scroll">
	{#if $successMessage}
		<!-- Display the success message instead of the form -->
		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
			<!-- Icon -->
			<!-- <div>(icon)</div> -->
			<!-- Message -->
			<div class="alert-message">
				<h3 class="h3">Success</h3>
				<p>{$successMessage}</p>
			</div>
			<!-- Actions (in this case, only the Reset button) -->
			<div class="alert-actions">
				<button
					class="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
					on:click={handleReset}
				>
					Reset
				</button>
			</div>
		</aside>
	{:else}
		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
			{#each fields as field}
				<div class="mb-4">
					{#if $errors[field]}
						<span class="block mb-2 font-semibold text-red-500">{$errors[field]}</span>
					{:else}
						<label for={field} class="block mb-2 font-semibold text-white"
							>{field.charAt(0).toUpperCase() + field.slice(1)}</label
						>
					{/if}

					{#if field === 'about'}
						<textarea
							name={field}
							class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
							bind:value={$form[field]}
							aria-invalid={$errors[field] ? 'true' : undefined}
							{...constraints[field]}
						/>
					{:else if field === 'favoriteFood'}
						<select
							name={field}
							class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
							bind:value={$form[field]}
							aria-invalid={$errors[field] ? 'true' : undefined}
							{...constraints[field]}
						>
							<option value="">Select...</option>
							<option value="apple">Apple</option>
							<option value="banana">Banana</option>
							<option value="coconut">Coconut</option>
							<option value="strawberry">Strawberry</option>
							<option value="mango">Mango</option>
						</select>
					{:else if field === 'age'}
						<input
							name={field}
							type="number"
							class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
							bind:value={$form[field]}
							aria-invalid={$errors[field] ? 'true' : undefined}
							{...constraints[field]}
						/>
					{:else if field === 'slider'}
						<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked>
							<div class="flex items-center justify-between">
								<div class="text-xs">{$form[field]} / 100</div>
							</div>
						</RangeSlider>
					{:else if field === 'toggle'}
						<SlideToggle name={field} bind:checked={$form[field]} />
					{:else}
						<input
							name={field}
							type="text"
							class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
							bind:value={$form[field]}
							aria-invalid={$errors[field] ? 'true' : undefined}
							{...constraints[field]}
						/>
					{/if}
				</div>
			{/each}

			<button
				type="submit"
				class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
				disabled={$errors.name ||
					$errors.email ||
					$errors.about ||
					$errors.age ||
					$errors.favoriteFood}
			>
				Submit
			</button>
		</form>
	{/if}
</div>
