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

	let composer = {
		id: 'ComposerParent',
		machine: {
			initial: 'NOTREADY',
			states: {
				NOTREADY: {
					on: { TOGGLE: 'READY' }
				},
				READY: {
					on: { TOGGLE: 'NOTREADY' }
				}
			}
		},
		layout: {
			columns: '1fr 1fr',
			rows: 'auto 1fr',
			areas: `
				"topleft topright"
				"mainleft mainright"
			`
		},
		children: [
			{
				id: 'ComposerCharly',
				component: 'ComposerCharly',
				slot: 'mainright',
				data: {
					map: {
						todos: queryTodos,
						messages: queryMessages
					}
				},
				machine: {
					initial: 'LOADING',
					states: {
						LOADING: {
							on: {
								TOGGLE: {
									target: 'READY'
								}
							}
						},
						READY: {
							on: {
								TOGGLE: {
									target: 'LOADING'
								}
							}
						}
					}
				}
			},
			{
				id: 'ComposerBob',
				component: 'ComposerBob',
				slot: 'topleft',
				machine: {
					initial: 'READY',
					states: {
						NOTREADY: {
							on: { TOGGLE: 'READY' }
						},
						READY: {
							on: { TOGGLE: 'NOTREADY' }
						}
					}
				}
			},
			{
				id: 'ComposerAlice',
				component: 'ComposerAlice',
				slot: 'topright',
				machine: {
					initial: 'RED',
					states: {
						GREEN: {
							on: { SWITCH: 'YELLOW' }
						},
						YELLOW: {
							on: { SWITCH: 'RED' }
						},
						RED: {
							on: { SWITCH: 'GREEN' }
						}
					},
					on: {
						READY: 'GREEN',
						NOTREADY: 'RED'
					}
				}
			},
			{
				id: 'ComposerForm',
				component: 'ComposerForm',
				slot: 'mainleft',
				machine: {
					id: 'validation',
					initial: 'notValidated',
					context: {
						isValidated: false
					},
					states: {
						notValidated: {
							on: {
								VALIDATE: {
									target: 'isValidated',
									actions: 'setValidated'
								}
							}
						},
						isValidated: {
							on: {
								INVALIDATE: {
									target: 'notValidated',
									actions: 'setNotValidated'
								}
							}
						}
					},
					services: {
						setValidated: (context) => (context.isValidated = true),
						setNotValidated: (context) => (context.isValidated = false)
					}
				}
			}
		]
	};
</script>

<Composer {composer} />
