<!-- src/lib/components/machines/SignIn.svelte -->
<script lang="ts">
	import { useMachine } from '@xstate/svelte';
	import { SignInMachine } from './signInMachine';
	import { superForm } from 'sveltekit-superforms/client';
	import { HelloUserSchema } from '$lib/types/HelloUserSchema';

	const { state, send } = useMachine(SignInMachine);

	const initialFormData = {
		email: '',
		name: ''
	};

	const { form, errors, validate, constraints } = superForm(initialFormData, {
		validators: HelloUserSchema,
		warnings: {
			noValidationAndConstraints: false
		},
		validationMethod: 'oninput',
		clearOnSubmit: 'errors-and-message'
	});

	async function handleNext(field) {
		const validationResult = await validate(field);
		if (validationResult.valid) {
			send({ type: 'NEXT', value: form[field] });
		}
	}
</script>

{#if $state.matches('notSignedIn')}
	<button on:click={() => send('START')}>Start Sign In</button>
{:else if $state.matches('email')}
	<div>
		<label for="email">Email:</label>
		<input id="email" type="email" bind:value={form.email} {...constraints.email} />
		{#if errors.email}<span>{$errors.email}</span>{/if}
		<button on:click={() => handleNext('email')}>Next</button>
	</div>
{:else if $state.matches('name')}
	<div>
		<label for="name">Name:</label>
		<input id="name" type="text" bind:value={form.name} {...constraints.name} />
		{#if errors.name}<span>{$errors.name}</span>{/if}
		<button on:click={() => handleNext('name')}>Next</button>
	</div>
{:else if $state.matches('signedIn')}
	<!-- <Composite id="account" component="Account" /> -->account signed in
{/if}
