<script lang="ts">
	import PhoneInput from '$lib/PhoneInput.svelte';
	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
	import TextInput from '$lib/TextInput.svelte';
	import { ArrowRight, Check } from 'phosphor-svelte';

	let stateMachineRef: StateMachine;
	let index = $state(1);

	const pages: StateMachinePage[] = [
		{
			hero: {
				text: 'Hey there!',
				fontSize: 'large',
				colour: 'light',
				size: 'large'
			},
			snippet: firstPage,
			button: {
				text: 'Next',
				onclick: () => console.log('next'),
				icon: {
					component: ArrowRight,
					props: { size: '1.2em', weight: 'bold' }
				}
			}
		},
		{
			hero: {
				text: 'How can we reach you?',
				fontSize: 'small',
				colour: 'dark',
				size: 'small'
			},
			snippet: secondPage,
			button: {
				text: 'Submit',
				onclick: () => console.log('finish'),
				icon: {
					component: Check,
					props: { size: '1.2em', weight: 'bold' }
				}
			}
		}
	];

	const successPage: StateMachinePage = {
		disableBack: true,
		hero: {
			text: 'All done! 🎉',
			fontSize: 'small',
			size: 'large',
			colour: 'light'
		},
		snippet: finishedSnippet,
		button: false
	};

	const failurePage: StateMachinePage = {
		disableBack: true,
		hero: {
			text: 'Something went wrong 😔',
			fontSize: 'small',
			size: 'large',
			colour: 'dark'
		},
		snippet: failureSnippet,
		button: false
	};
</script>

<StateMachine
	bind:this={stateMachineRef}
	{pages}
	success={successPage}
	failure={failurePage}
	{index}
></StateMachine>

{#snippet firstPage()}
	<TextInput label="What's your name?" validate={{ required: true }} />
{/snippet}

{#snippet secondPage()}
	<PhoneInput label="What's your phone number?" required={true} />
{/snippet}

{#snippet finishedSnippet()}
	<p>All done! Thanks so much for submitting.</p>
{/snippet}

{#snippet failureSnippet()}
	<p class="my-3">
		We're sorry for the inconvenience. Something went wrong on our end and we couldn't process your
		submission.
	</p>
{/snippet}
