<script lang="ts">
	import Composer from '$lib/core/Composer.svelte';
	import { UserSchema } from '$lib/types/UserSchema';

	let composer = {
		id: 'FormContainer',
		layout: {
			rows: '1fr auto',
			areas: `
				"main "
				"bottom "
			`
		},
		children: [
			{
				id: 'ComposerForm',
				component: 'ComposerForm',
				slot: 'main',
				machine: {
					id: 'validation',
					initial: 'notValidated',
					context: {
						fields: [
							{ name: 'name', type: 'text', placeholder: '' },
							{ name: 'email', type: 'email', placeholder: '' },
							{ name: 'about', type: 'textarea', placeholder: '' },
							{ name: 'age', type: 'number', placeholder: '' },
							{ name: 'favoriteFood', type: 'select', placeholder: '' }
						],
						validators: UserSchema
					},
					states: {
						notValidated: {
							on: {
								VALIDATE: {
									target: 'isValidated',
									actions: 'setValidated'
								}
							}
						},
						isValidated: {
							on: {
								INVALIDATE: {
									target: 'notValidated',
									actions: 'setNotValidated'
								}
							}
						}
					}
				}
			},
			{
				id: 'terminal',
				component: 'Terminal',
				slot: 'bottom'
			}
		]
	};
</script>

<Composer {composer} />
