<script lang="ts">
	import { superForm } from 'sveltekit-superforms/client';
	import { UserSchema } from '$lib/types/UserSchema';

	const initialFormData = { name: '' };

	const { form, errors, validate, constraints } = superForm(initialFormData, {
		validators: UserSchema,
		warnings: {
			noValidationAndConstraints: false
		},
		validationMethod: 'oninput' // Trigger validation on input events
	});

	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);
	}
</script>

<div class="flex items-center justify-center min-h-screen">
	<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
		<div class="mb-4">
			{#if $errors.name}
				<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
			{:else}
				<label for="name" class="block mb-2 font-semibold text-white">Name</label>
			{/if}

			<input
				name="name"
				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.name}
				aria-invalid={$errors.name ? 'true' : undefined}
				{...constraints.name}
			/>
		</div>

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