<script setup lang="ts">
import {
  CometChatMessageEvents,
  CometChatTheme,
  MessageStatus,
} from "@cometchat/uikit-resources";
import { CloseIcon } from "@cometchat/chat-uikit-vue";
import {
  getCurrentInstance,
  ref,
  inject,
  Ref,
  onBeforeUnmount,
  onMounted,
} from "vue";
import { ChatInstance } from "../chat/types";
import { ReplyPreviewStyle } from "../chat/replyStyle";
import { BaseMessage } from "@cometchat/chat-sdk-javascript";
import BccReplyPreview from "./BccReplyPreview.vue";

const props = defineProps({
  replyToMessage: { type: BaseMessage },
  titlePrefix: { type: String },
  closeButtonIconURL: { type: String, default: CloseIcon },
  previewStyle: { type: Object, default: {} },
});

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

const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);

function closePreview(_event?: MouseEvent) {
  if (chatInstance) {
    chatInstance.value.replyToMessage = null;
  }
}

const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
  ({ status }) => {
    if (status === MessageStatus.inprogress) {
      closePreview();
    }
  }
);

const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
  ({ status }) => {
    if (status === MessageStatus.inprogress) {
      closePreview();
    }
  }
);

let originalGetAttachmentOptions: Function;
onMounted(() => {
  if (msgComposerData && chatInstance) {
    msgComposerData.inputRef.querySelector(".messageinput-input").focus()
    if (msgComposerData.messageToBeEdited) {
      msgComposerData.showPreview = false; // This is only used for edit message preview
      msgComposerData.messageToBeEdited = null;
      msgComposerData.messageText = "";
      msgComposerData.textRef = "";
      msgComposerData.inputRef?.emptyInputField();
    }
    originalGetAttachmentOptions = msgComposerData.getAttachmentOptions;
    msgComposerData.getAttachmentOptions = function() {
      return originalGetAttachmentOptions().filter((option: any) => option.id === "captionedimage");
    }
  }
});

onBeforeUnmount(() => {
  msgComposerData.getAttachmentOptions = originalGetAttachmentOptions;
  onMessageEditStart.unsubscribe();
  onMessageSend.unsubscribe();
});

const closeBtnIconStyle = () => {
  return {
    buttonIconTint: previewStyle?.closeButtonIconTint,
    height: "14px",
    width: "14px",
    border: "none",
    borderRadius: "0",
    background: "transparent",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  };
};

const wrapperStyle = () => {
  return {
    background: previewStyle?.background,
    border: previewStyle?.border,
    height: previewStyle?.height,
    width: previewStyle?.width,
    borderRadius: previewStyle?.borderRadius,
  };
};
</script>

<template>
  <div class="bcc__reply_box" :style="wrapperStyle()">
    <BccReplyPreview 
      titlePrefix="Reply to "
      :replyToMessage="props.replyToMessage"
      :previewStyle="previewStyle"
    />
    <div class="bcc__reply_preview__close" @click="closePreview">
      <cometchat-button
        :buttonStyle="closeBtnIconStyle()"
        :iconURL="props.closeButtonIconURL"
      ></cometchat-button>
    </div>
  </div>
</template>

<style>
.cc-messagecomposer-wrapper__headerview {
  position: static !important;
}
</style>
<style scoped>
* {
  box-sizing: border-box;
}
.bcc__reply_box {
  padding: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  min-height: 30px;
}
.bcc__reply_preview__close {
  width: 14px;
  height: 14px;
  display: inline-block;
}
</style>
