<script setup lang="ts">
import chat from "../chat";
import { Group } from "@cometchat/chat-sdk-javascript";
import { CloseIcon } from "@bcc-code/icons-vue";
import { CometChatMessages } from "../chat/cometChatPatches";
import { getScheduledMessagesComposerConfiguration, getScheduledMessagesListConfiguration } from "../chat/uiKit";
import { inject, nextTick, onMounted, onUnmounted, ref, Ref, watchEffect } from "vue";
import { ChatInstance } from "../chat/types";
import { localize } from "@cometchat/uikit-resources";
import { BccAlert } from "@bcc-code/design-library-vue";
import BccAttachmentBox from "./BccAttachmentBox.vue";
const emit = defineEmits(['close']);

const props = defineProps({
    chatGroup: { type: Group, required: true },
    originalChatUid: { type: String, required: true }
})
const chatGroup = ref<Group>();
chatGroup.value = props.chatGroup
const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
if (chatInstance) chatInstance.value.showAlert = false;

const messageComposerConfiguration = getScheduledMessagesComposerConfiguration(props.originalChatUid, chatInstance);
const messageListConfiguration = getScheduledMessagesListConfiguration(props.originalChatUid, chatInstance, chatGroup);

function closeList() {
    if (chatInstance?.value) {
        chatInstance.value.userInput = document.querySelector('.messageinput-input')?.innerHTML ?? null;
        chatInstance.value.decoyAttachment = chatInstance.value.captionedAttachment
        chatInstance.value.captionedAttachment = null
    }
    emit('close');
}

watchEffect(() => {
    if (chatInstance && chatInstance?.value.captionedAttachment) {
        messageComposerConfiguration.value.headerView = {
            componentName: BccAttachmentBox,
            props: {
                captionedAttachment: chatInstance.value.captionedAttachment
            }
        }
    } else {
        messageComposerConfiguration.value.headerView = undefined;
    }
})

onMounted(async () => {
    await nextTick();
    const userInput = document.querySelector('.messageinput-input');
    if (userInput && chatInstance?.value.userInput) {
        userInput.innerHTML = chatInstance.value.userInput;
    }

    if (chatInstance?.value.decoyAttachment) {
        chatInstance.value.captionedAttachment = chatInstance.value.decoyAttachment
        chatInstance.value.decoyAttachment = null
    }
})

onUnmounted(() => {
    if (chatInstance) {
        chatInstance.value.captionedAttachment = null
        chatInstance.value.replyToMessage = null
        chatInstance.value.scheduledMessageChat = undefined
        chatInstance.value.showScheduledMessagesChat = false
        chatInstance.value.showAlert = false
        chatInstance.value.rescheduleInfo = null
    }
})

</script>

<template>
    <div class="bcc-chat-message-list">
        <div class="title-bar">
            <p class="title"> {{ localize("SCHEDULED_MESSAGES") }} </p>
            <CloseIcon @click="closeList()" class="closeIcon" />
        </div>
        <div v-if="chatGroup" class="bcc-chat-message-list scheduled-list">
            <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
                :messageComposerConfiguration="messageComposerConfiguration"
                :messageListConfiguration="messageListConfiguration" :hideDetails="true" :group="props.chatGroup" />

            <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value"
                class="bcc-chat-message-composer-offline">
                <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
                <span v-else>Connecting... </span>
            </div>
            <BccAlert class="absolute top-0 w-[97%] mx-2 mt-11" icon closeButton context="danger"
                :open="chatInstance!.showAlert" @close="chatInstance!.showAlert = false">
                {{ localize("ERROR_SENDING_SCHEDULED_MESSAGE") }}
            </BccAlert>
            <BccAlert class="absolute top-0 w-[97%] mx-2 mt-11" icon closeButton context="danger"
                :open="chatInstance!.showRescheduleAlert" @close="chatInstance!.showRescheduleAlert = false">
                {{ localize("ERROR_RESCHEDULING_MESSAGE") }}
            </BccAlert>
        </div>
    </div>
</template>

<style scoped>
.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cc__secondary, #111827);
    padding: 0.4rem 0.6rem;


    .title {
        color: var(--cc__text-color);
    }

    .closeIcon {
        width: 1.2rem;
        cursor: pointer;
        color: var(--cc__text-color);
    }
}

.scheduled-list {
    height: calc(100% - 45px) !important;
}
</style>