<script lang="ts">
	import Message from '$lib/components/Message.svelte';
	import { EventsOn } from "$lib/wailsjs/runtime/runtime";
	import { GetMessagesFromConversation } from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";

	let { conversation } = $props();

	let { messages } = $state([]);
	
	$effect(async () => {
		const Page = await GetMessagesFromConversation(conversation, 1, 100);
		messages = Page.messages;
	});

	EventsOn("reload", async () => {
		const Page = await GetMessagesFromConversation(conversation, 1, 100);
		messages = Page.messages;
	});
</script>

<section class="flex-1 flex flex-col-reverse overflow-scroll px-8 py-4 gap-1">
	{#each messages as message (message.ID)}
		<Message {message}
				 sent={message.Sender.ID === conversation.ServerRecipient.ID || message.Sender.Value === conversation.ServerRecipient.Value}  />
	{/each}
</section>