<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import Button from "@/components/input/Button.vue";
import { useMessagesStore } from "@/stores/messages";
import Header from "@/components/text/Header.vue";

const messagesStore = useMessagesStore();
const messages = computed(() => messagesStore.messages);
const messageInput = ref("");

function sendMessage() {
    const text = messageInput.value.trim();
    if (!text) return;
    messagesStore.sendMessage(text);
    messageInput.value = "";
}

onMounted(() => {
    messagesStore.connect();
});
onUnmounted(() => {
    messagesStore.disconnect();
});
</script>

<template>
    <div class="flex flex-col">
        <Header>Chat</Header>
        <div class="flex flex-col flex-1 overflow-x-scroll">
            <p v-for="message in messages" :key="message.id">
                {{ message.text }}
            </p>
        </div>
        <input v-model="messageInput" @keyup.enter="sendMessage" />
        <Button @click="sendMessage">Send</Button>
    </div>
</template>
