<script setup lang="ts">
import { defineProps, inject, PropType } from "vue";
import { Message } from "@/store/models/model";
import API from "@/services/imapAPI";
import store from "@/store/store";
import { isSeenFc } from "@/utils/flagsUtils";
import SvgLoader from "@/components/utils/SvgLoader.vue";

const props = defineProps({
    msg: Object as PropType<Message>,
});

const room: any = inject("room");

const setFlag = (flag: string) => {
    // todo loading
    if (!room?.value || !props.msg) return;
    let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
    apiCall({
        mailboxId: room.value?.mailboxId,
        messageId: props.msg?.id,
        flag: flag,
    })
        .then((res) => {
            if (isSeenFc(props.msg?.flags)) {
                store.commit("removeFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
            } else {
                store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
            }
        })
        .catch((err) => {
            console.log(err);
        });
};
</script>
<template>
    <div id="main">
        <div class="button" @click="setFlag('\\Seen')">
            {{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
        </div>
        <div>flag favorite</div>
        <div>reply</div>
        <div>delete from all</div>
        <div>delete from remote</div>
        <div>transfer</div>
        <div>see source</div>
        <div>{{ props.msg?.flags }}</div>
        <div class="icons">
            <SvgLoader svg="flag-line" />
            <SvgLoader svg="reply-line" />
            <SvgLoader svg="delete-bin-4-line" />
            <SvgLoader svg="delete-bin-6-line" />
            <SvgLoader svg="share-forward-line" />
            <SvgLoader svg="reply-all-line" />
            <SvgLoader svg="mail-check-line" />
            <SvgLoader svg="mail-unread-line" />
        </div>
    </div>
</template>

<style scoped>
#main {
    text-align: center;
}

.icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.button {
    border: solid 1px;
    border-radius: 6px;
    display: initial;
    padding: 1px 5px;
    cursor: pointer;
}

.button:hover {
    background-color: var(--selected);
}
</style>
