<script>
	import { createMessage } from '$lib/services/messages/messages';
	export let me;

	function sendMessage() {
		const randomNumber = Math.floor(Math.random() * 100) + 1;
		const messageData = {
			text: `test ${randomNumber}`,
			sender: 'ComposerCharly',
			type: 'text'
		};
		createMessage(messageData);
	}
</script>

<div class="flex flex-col h-screen border-2 border-green-500">
	<section class="p-8 h-96">
		<p>My ID is: {$me.id}</p>

		My state is: {$me.state}
		{#if $me.store.todos}
			{#each $me.store.todos as todo}
				<p>{todo.text}</p>
			{/each}
		{/if}
	</section>
	<button
		class="self-center px-4 py-2 font-bold text-white rounded hover:bg-blue-700"
		on:click={sendMessage}
	>
		Send
	</button>
	<section class="flex-grow p-8 overflow-y-auto">
		{#if $me.store.messages}
			{#each $me.store.messages as message}
				<p>{message.text}</p>
			{/each}
		{/if}
	</section>
</div>
