<script setup lang="ts">
import { defineProps, PropType } from "vue";
import Badge from "@/components/Badge.vue";
import { RoomType, Address, Room } from "@/store/models/model";
import MemberList from "./MemberList.vue";

const props = defineProps({ id: Number, room: Object as PropType<Room> });

const roomTitle = () => {
    const type = props.room?.roomType;
    if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
        return props.room?.user;
    }
    return props.room?.roomName;
};

const to = () => props.room?.members.filter((member: Address) => member.type == "to");
const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
</script>

<template>
    <div class="main">
        <div class="context">
            <div class="infos">
                <Badge :value="RoomType[room?.roomType ?? 0]" />
                {{ roomTitle() }}
            </div>
            <div class="action">action: threads message important</div>
        </div>
        <div class="members" v-if="room?.roomType != RoomType.DM">
            <MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />
            <MemberList class="members-list" v-if="cc()?.length ?? 0 > 0" type="cc" :members="cc()" />
        </div>
    </div>
</template>

<style scoped>
.main {
}
.context {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #505050;
    align-items: center;
    width: 100%;
    height: 35px;
}

.members-list {
    padding: 3px 0;
    margin: 0 5px;
    border-bottom: 1px solid #505050;
}
.members {
}

.infos {
    margin-left: 15px;
}

.action {
    margin-right: 15px;
}
</style>
