<script setup lang="ts">
import { localize } from "@cometchat/uikit-resources";
import { SendIcon } from "@cometchat/chat-uikit-vue";
import { sendMediaMessage } from "../chat/captionedAttachment";
import { ChatInstance } from "../chat/types";
import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref } from "vue";
import chat from "../chat";

const sendButtonIconURL = SendIcon;
const sendButtonStyle = {
    height: "24px",
    width: "24px",
    border: "none",
    borderRadius: "0",
    buttonIconTint: "var(--cc__primary150, #3F4669)",
    background: "transparent"
}

const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
const vueInstance: any = getCurrentInstance();
const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;

function sendMessage() {
    if (chat.onlineStatus.value === "offline") return;
    if (!msgComposerData) return false;
    if (!chatInstance?.value.captionedAttachment?.fileObject) return false;
    if (!msgComposerProps?.group && !msgComposerProps?.user) return false;

    const receiverId = msgComposerProps?.group?.getGuid() || msgComposerProps?.user?.getUid();
    const receiverType = msgComposerProps?.group ? "group" : "user";
    const fileObject = chatInstance.value.captionedAttachment.fileObject;
    const caption = msgComposerData.messageText;
    const dimensions = chatInstance.value.captionedAttachment.dimensions;

    const sendMessageResult = sendMediaMessage(msgComposerProps, fileObject, receiverId, receiverType, "image", dimensions, caption);
    if (sendMessageResult) {
        msgComposerData.showSendButton = false;
        // Clear text input
        msgComposerData.messageText = "";
        msgComposerData.textRef = "";
        msgComposerData.inputRef?.emptyInputField();
        return true;
    }
    return false;
}

function sendMessageOnEnter(textEnteredEvent: CustomEventInit) {
    if (chat.onlineStatus.value === "offline") return;
    if (!msgComposerData) return;
    msgComposerData.messageText = textEnteredEvent.detail.value;
    if (sendMessage()) {
        msgComposerData.showMentionsCountWarning = false;
        msgComposerData.showListForMentions = false;
    }
}

// The following will send the message when **enter is pressed** in the input box and the input box **is not empty**.
const originalSendMessageOnEnter = msgComposerData?.sendMessageOnEnter;
onMounted(() => {
    if (!msgComposerData) return;
    msgComposerData.sendMessageOnEnter = sendMessageOnEnter;
});
onBeforeUnmount(() => {
    msgComposerData.sendMessageOnEnter = originalSendMessageOnEnter;
});

if (chatInstance) {
    // Here we add an additional onKeyDown event on the input field that sends our image when pressing Enter if the input field **is empty**.
    // We need this in addition to hooking into the "cc-text-input-entered" event because that event isn't triggered if the input field is empty.
    const ccTextInput = msgComposerData.inputRef.querySelector(".messageinput-input");
    ccTextInput.addEventListener("keydown", function (event: KeyboardEvent) {
        if (msgComposerData.messageText?.trim() == "" && event.keyCode === 13 && !event.shiftKey) sendMessage();
    });
}

</script>

<template>
    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton"
        :style="{ 'background': !msgComposerData || !msgComposerProps ? '#f00' : 'unset' }">
        <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
            :hoverText="localize('SEND_MESSAGE')" @click=sendMessage() />
    </div>
</template>

<style scoped>
.cc-messagecomposer-wrapper__sendbutton {
    margin: 0 5px
}
</style>