<script>
	import Composite from '$lib/core/Composite.svelte';
	import { dataStore } from '$lib/core/dataLoader';

	$: console.log('Data Store contents:', $dataStore);

	let composite = {
		id: 'composite',
		layout: {
			areas: `
				"top main"
				"aside main"
				"footer footer ";
			`,
			columns: '1fr 1fr ',
			rows: '1fr 1fr auto'
		},
		children: [
			{
				id: 'w',
				component: 'Wallet',
				slot: 'aside',
				store: {
					pkpWallet: '',
					rpcURL: 'https://rpc.gnosischain.com/',
					pkpPubKey:
						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
				}
			},
			{
				id: 'hello',
				component: 'HelloEarth',
				slot: 'top',
				map: {
					pkpWallet: 'w.pkpWallet',
					rpcURL: 'w.rpcURL',
					messages: 'data.queryMessages',
					todos: 'data.queryTodos'
				},
				services: ['helloEarthAlert']
			},
			{
				id: 'messages',
				component: 'Messages',
				slot: 'main'
			},
			{
				id: 'terminal',
				component: 'Terminal',
				slot: 'footer'
			}
		]
	};
</script>

<Composite {composite} />
