<script>
	import Composer from '$lib/core/refactor/Composer.svelte';

	let composer = {
		id: 'ComposerParent',
		store: {
			title: 'Hello Earth',
			description:
				'how to use the store and mapping logic of store to store and data to store maps',
			helloMapMe: 'this is going to be mapped'
		},
		machine: {
			initial: 'NOTREADY',
			states: {
				NOTREADY: {
					on: { TOGGLE: 'READY' }
				},
				READY: {
					on: { TOGGLE: 'NOTREADY' }
				}
			}
		},
		layout: {
			columns: '1fr 1fr',
			rows: '1fr 1fr',
			areas: `
				"top aside"
				"bottom aside"
			`
		},
		children: [
			{
				id: 'ComposerCharly',
				component: 'ComposerCharly',
				slot: 'aside',
				machine: {
					initial: 'NOTREADY',
					states: {
						NOTREADY: {
							on: { TOGGLE: 'READY' }
						},
						READY: {
							on: { TOGGLE: 'NOTREADY' }
						}
					}
				},
				store: {
					machine: { state: 'NOTREADY' },
					hello: 'define me directly',
					hello2: 'overwrite me with the mapping value'
				},
				map: {
					title: '@hello:title',
					description: '@hello:description',
					hello2: '@hello:helloMapMe',
					pkpWallet: '@wallet:pkpWallet',
					todos: '@data:queryTodos'
				},
				services: ['helloEarthAlert']
			},
			{
				id: 'ComposerBob',
				component: 'ComposerBob',
				slot: 'top',
				store: {
					machine: { state: 'NOTREADY' }
				},
				machine: {
					initial: 'NOTREADY',
					states: {
						NOTREADY: {
							on: { TOGGLE: 'READY' }
						},
						READY: {
							on: { TOGGLE: 'NOTREADY' }
						}
					}
				}
			},
			{
				id: 'ComposerAlice',
				component: 'ComposerAlice',
				slot: 'bottom',
				machine: {
					initial: 'RED',
					states: {
						GREEN: {
							on: { SWITCH: 'YELLOW' }
						},
						YELLOW: {
							on: { SWITCH: 'RED' }
						},
						RED: {
							on: { SWITCH: 'GREEN' }
						}
					},
					on: {
						READY: 'GREEN',
						NOTREADY: 'RED'
					}
				}
			}
		]
	};
</script>

<Composer {composer} />
