<script>
	import { onMount } from 'svelte';
	import { coreServices } from '$lib/core/refactor/coreServices';

	export let me;
	export let data;

	onMount(() => {
		// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
	});
	function toggle() {
		me.do.machine.send('TOGGLE');
	}
</script>

<div class="border-2 border-green-500">
	<p>My ID is: {me.id}</p>
	my state is {$data.state}
	<h1 class="h1">I am charly</h1>
	my data.context prop: {JSON.stringify($data.context)}
	<br />
	<button
		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
		on:click={toggle}
	>
		Toggle
	</button>

	<!-- {#each $data.context.messages as message (message.timestamp)}
		<p>{message.text}</p>
	{/each} -->
</div>
