<script setup lang="ts">
import { Message } from "@/store/models/model";
import { ref, watch, defineProps, PropType } from "vue";
import Content from "../structure/message/Content.vue";
import Modal from "./Modal.vue";

const props = defineProps({ messageId: { type: Number, require: true }, message: Object as PropType<Message> });

const messageId = ref(-1);
watch(
    () => props.messageId,
    (newMessageId: number | undefined) => {
        if (!newMessageId) return;
        messageId.value = newMessageId;
    },
);
</script>

<template>
    <div class="main">
        <Modal v-if="messageId != -1" @close-modal="() => $emit('close')">
            <template v-slot:body>
                <div>{{ props.message?.subject ?? "No Object" }}</div>
                <Content type="large" :content="props.message?.content" class="content" />
            </template>
        </Modal>
    </div>
</template>

<style scoped>
.main {
    min-width: 700px;
}
/* todo define size automatically */
.content {
    width: 700px;
    height: 700px;
}
</style>
