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

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 handleDelete = () => {
    if (props.room?.id) {
        imapAPI.deleteRoom(props.room.id);
    }
    // todo loading, delete
};

// todo remove us from list
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>
        <div class="context">
            <div class="infos">
                <Badge :value="RoomType[room?.roomType ?? 0]" />
                {{ roomTitle() }}
            </div>
            <div class="action">
                <SvgLoader svg="list-unordered" classes="selectable" v-tooltip="{ text: 'Thread list' }" />
                <SvgLoader svg="pushpin-line" classes="selectable" v-tooltip="{ text: 'Important messages' }" />
                <SvgLoader
                    svg="delete-bin-4-line"
                    @click="handleDelete()"
                    classes="danger,selectable"
                    v-tooltip="{ text: 'Delete room' }"
                />
            </div>
        </div>
        <div 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>
.context {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    width: 100%;
    height: 35px;
}

.members-list {
    padding: 3px 5px;
    border-bottom: 1px solid var(--border-color);
}
.infos {
    margin-left: 15px;
}

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