<script setup>
import { useStore } from "vuex";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { onBeforeMount, ref } from "vue";
import Header from "./Header.vue";
import Message from "./Message.vue";

const store = useStore();
const route = useRoute();
const id = ref(parseInt(route.params?.id));
onBeforeMount(async () => {
    console.log(id);
    // get data
    let room = store.getters.room(id);
    if (!room || room?.fetched === false) {
        // todo
        // await store.dispatch("fetchMessages", );
    }
    store.commit("setActiveRoom", id);
});

onBeforeRouteUpdate(async (to, from) => {
    if (to.params.id !== from.params.id) {
        id.value = parseInt(to.params.id);
        console.log(id);
        store.commit("setActiveRoom", id);
    }
});
</script>

<template>
    <div id="main">
        <Header :id="id"></Header>
        <div id="RoomViewBody">
            <div class="content">
                <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
            </div>
            <div id="composer">COMPOSER</div>
        </div>
    </div>
</template>

<style scoped>
#main {
    background-color: #1d1d23;
    color: white;
    width: 100%;
}

#RoomViewBody {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#composer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 10px;

    height: 35px;
    background-color: red;
}

.content {
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
    margin-bottom: 100px;
}
</style>
