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

	let composite = {
		id: 'testingstuff',
		layout: {
			columns: '1fr 1fr',
			areas: `
				"left right"
			`
		},
		children: [
			{
				id: 'learnready',
				component: 'LearnReady',
				slot: 'left',
				store: {
					machine: { state: 'NOTREADY' }
				},
				machine: {
					initial: 'NOTREADY',
					states: {
						NOTREADY: {
							on: { TOGGLE: 'READY' }
						},
						READY: {
							on: { TOGGLE: 'NOTREADY' }
						}
					}
				}
			},
			{
				id: 'learncolor',
				component: 'LearnColor',
				slot: 'right',
				machine: {
					initial: 'RED',
					states: {
						GREEN: {
							on: { SWITCH: 'YELLOW' }
						},
						YELLOW: {
							on: { SWITCH: 'RED' }
						},
						RED: {
							on: { SWITCH: 'GREEN' }
						}
					},
					on: {
						READY: 'GREEN',
						NOTREADY: 'RED'
					}
				}
			}
		]
	};

	// 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> -->
