<script setup lang="ts">
import { useRouter } from "vue-router";
import { defineProps, PropType } from "vue";
import BaseAvatar from "../../avatars/BaseAvatar.vue";
import Badge from "@/components/Badge.vue";
import ThreadList from "./threads/ThreadList.vue";
import store from "@/store/store";
import { Room } from "@/store/models/model";

const props = defineProps({
    room: Object as PropType<Room>,
});
// console.log(props.room?.threadIds);

const router = useRouter();
</script>

<template>
    <div>
        <div
            class="room"
            @click="router.push(`/${props.room?.id}`)"
            v-bind:class="store.state.activeRoom == props.room?.id ? 'selected' : ''"
        >
            <BaseAvatar url="vue.png" />
            <div class="content">
                <div class="sender">{{ props.room?.user }}</div>
                <div class="object">{{ props.room?.roomName }}</div>
            </div>
            <Badge class="badge" v-if="props.room?.notSeen ?? 0 > 0" :value="props.room?.notSeen" type="badge-number" />
        </div>
        <ThreadList :threadIds="props.room?.threadIds" />
    </div>
</template>

<style scoped>
.badge {
    margin: auto 7px auto 1px;
}
.room {
    box-sizing: border-box;
    contain: content;
    display: flex;
    margin: 4px;
    padding: 4px;
    cursor: pointer;
}

.room:hover,
.selected {
    background-color: var(--selected);
    border-radius: 8px;
}

.content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 32px;
    justify-content: center;
    margin-left: 8px;
    min-width: 0;
}

.sender {
    font-size: 1.4rem;
    line-height: 1.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: var(--primary-text);
}

.object {
    color: var(--secondary-text);
    line-height: 1.8rem;
    font-size: 1.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
</style>
