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

	let composer = {
		id: 'QueriesContainer',
		layout: {
			rows: '1fr auto',
			areas: `
				"main"
				"bottom"
			`
		},
		children: [
			{
				id: 'ComposerQueries',
				component: 'ComposerQueries',
				slot: 'main',
				data: {
					map: {
						todos: queryTodos,
						messages: queryMessages
					}
				},
				machine: {
					initial: 'LOADING',
					states: {
						LOADING: {
							on: {
								TOGGLE: {
									target: 'READY'
								}
							}
						},
						READY: {
							on: {
								TOGGLE: {
									target: 'LOADING'
								}
							}
						}
					}
				}
			},
			{
				id: 'terminal',
				component: 'Terminal',
				slot: 'bottom'
			}
		]
	};
</script>

<Composer {composer} />
