<!-- src/lib/components/Recipies/oRecipe.svelte -->
<script>
	import { interpret } from 'xstate';
	import Composite from '$lib/core/Composite.svelte';

	// export let machine;

	let composite = {
		id: 'testingstuff',
		layout: {
			columns: '1fr 1fr',
			areas: `
				"left right"
			`
		},
		children: [
			{
				id: 'child',
				component: 'LearnReady',
				slot: 'left',
				store: {
					xstate: 'NOTREADY'
				},
				machine: {
					id: 'compositemachine',
					initial: 'NOTREADY',
					states: {
						NOTREADY: {
							on: { TOGGLE: 'READY' }
						},
						READY: {
							on: { TOGGLE: 'NOTREADY' }
						}
					}
				}
			},
			{
				id: 'parent',
				component: 'LearnColor',
				slot: 'right'
			}
		]
	};

	// let current = machine.initialState.value;

	// const service = interpret(machine)
	// 	.onTransition((state) => {
	// 		current = state.value;
	// 	})
	// 	.start();

	// Derive possible actions from the current state
	// $: possibleActions = machine.states[current]?.meta.buttons || [];
</script>

<div class="h-1/4">
	<Composite {composite} />
</div>

<!-- 
<main class="grid w-full h-full grid-rows-layout">
	<div class="w-full h-full p-4 overflow-scroll">
	
		<p>Current state: {current}</p>
		<h1>{machine.states[current].meta.title}</h1>
		{#if machine.states[current].meta.composite}
			<Composite composite={machine.states[current].meta.composite} />
		{/if}
	</div>
	<div class="p-4">
		{#each possibleActions as { type, label, disabled } (type)}
			<button
				class="px-4 py-2 text-white bg-blue-500 rounded"
				on:click={() => service.send(type)}
				{disabled}
			>
				{label}
			</button>
		{/each}
	</div>
</main>

<style>
	.grid-rows-layout {
		grid-template-rows: 1fr auto;
	}
</style> -->