<script setup lang="ts">
import { defineProps, PropType } from "vue";
import { decodeEmojis } from "../../../utils/string";
import { removeDuplicates } from "../../../utils/array";
import { Address, Message } from "@/store/models/model";
import Content from "./Content.vue";
import Options from "./Options.vue";
import { isSeenFc } from "@/utils/flagsUtils";

const props = defineProps({
    msg: Object as PropType<Message>,
    members: Array as PropType<Address[]>,
    mailboxId: Number,
    roomId: Number,
});

const displayAddresses = (addressIds: string[] | undefined): string => {
    if (!addressIds) return "";
    addressIds = removeDuplicates(addressIds);
    let res = "";
    addressIds.forEach((addressId) => {
        const address = props.members?.find((member) => member.id === parseInt(addressId));
        if (address) res += address.email;
    });
    return res;
};

const classes = (): string => {
    const flags = props.msg?.flags;

    // Important takes the priority on Seen flag
    if (flags?.includes("\\Important")) {
        return "msg-important";
    }
    if (!isSeenFc(flags)) {
        return "msg-notSeen";
    }
    return "msg-basic";
};
</script>
<!-- to if to is more than me
        cc -->
<!-- object (channel only)
        content
        attachments -->
<template>
    <div class="message" @dblclick="$emit('openMessageView', props.msg?.id)">
        <div id="context">
            <div class="left" id="profile">
                {{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}
            </div>
            <div class="middle">{{ decodeEmojis(props.msg?.subject) }}</div>
            <div class="right" id="date">
                {{
                    new Date(props.msg?.date ?? "").toLocaleString("en-GB", {
                        weekday: "short",
                        year: "numeric",
                        month: "2-digit",
                        day: "2-digit",
                        hour: "2-digit",
                        minute: "2-digit",
                        timeZone: "Europe/Paris",
                    })
                }}
            </div>
        </div>
        <div class="content" :class="[classes()]">
            <Content :content="props.msg?.content" />
            <Options class="options" :mailboxId="props.mailboxId" :roomId="props.roomId" :msg="props.msg" />
        </div>
    </div>
</template>

<style scoped>
.message {
    width: auto;
    /* border: white 1px solid; */
    margin: 10px 5px 0px 5px;
}

#context {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--quaternary-background);
    padding: 3px 10px;
    border-radius: 4px 4px 0 0;
}

.left,
.right {
    white-space: nowrap;
}

.middle {
    margin: 0 10px;
    text-align: center;
}

.content {
    display: flex;
    padding-top: 6px;
    flex-direction: row;
}

.msg-important {
    background-color: #ec7a4342;
}

.msg-notSeen {
    background-color: #222b5b61;
}

.msg-basic {
    background-color: var(--tertiary-background);
}

.options {
    flex: 1;
    text-align: center;
}
</style>
