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

const props = defineProps({
  captionedAttachment: { type: Object },
  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({})) });

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

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

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

onMounted(() => {
  if (msgComposerData) {
    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();
    }
  }
});

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

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

const wrapperStyle = () => {
  return {
    background: theme.value.palette.getBackground(),
    border: `1px solid ${theme.value.palette.getAccent200()}`,
    height: "100%",
    width: "100%",
    borderRadius: "12px",
  };
};
</script>

<template>
  <div class="bcc__attachment_box" :style="wrapperStyle()">
    <BccAttachmentPreview
      :captionedAttachment="props.captionedAttachment"
      :previewStyle="previewStyle"
    />
    <div class="bcc__attachment_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>
.bcc__attachment_box {
  padding: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  min-height: 30px;
}
.bcc__attachment_preview__close {
  width: 14px;
  height: 14px;
  display: inline-block;
}
</style>
