import { invalid, type Actions } from '@sveltejs/kit';

export const actions: Actions = {
	default: async (event) => {
                // get data from form
		const data = await event.request.formData();
		const name = data.get('name');
		const surname = data.get('surname');

		// validation
		const errors = validate({name, surname});
		if (errors) {
			return invalid(400, {
				name,
				surname,
				errors
			});
		}
		// call external be or db
		const result = await fetch('<url>', { body: JSON.stringify({name, surname}) });
		if (!result.ok) {
			return invalid(500, {
				name, 
				surname,
				beError: await result.text()
			})
		}
		return {
			name,
			surname,
			result: await result.json()
		}
	}
};

<script lang="ts">
	import { applyAction, enhance } from '$app/forms';
	import type { ActionData } from './$types';
	export let form: ActionData;
</script>

<form
	method="POST"
	use:enhance={(event) => {
		return async ({ result }) => {
			if (result.type === 'success') {
				alert('hello ' + result.data?.name);
			}
			applyAction(result);
		};
	}}
>
	<input type="text" name="name" placeholder="Name" value={form?.name || ''} />
	<input type="text" name="surname" placeholder="Surname" value={form?.surname || ''} />

	<button type="submit" class="btn btn-primary ">Salva</button>
</form>