<script setup lang="ts">
import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resources";
import { inject, ref } from "vue";
import { ReplyPreviewStyle } from "../chat/replyStyle";
import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
import { getMessageTextPreview, proxyImage, getSenderDisplayName } from "../chat/data";

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

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

const subtitleStyle = () => {
  return {
    font: previewStyle?.subtitleFont,
    color: previewStyle?.subtitleColor,
  };
};

const titleStyle = () => {
  return {
    font: previewStyle?.titleFont,
    color: previewStyle?.titleColor,
  };
}

const barStyle = () => {
  return {
    insetInlineStart: previewStyle?.barLeftPosition,
    width: previewStyle?.barWidth,
    background: previewStyle?.barBackground,
    opacity: previewStyle?.barOpacity,
  };
};

const previewWrapperStyle = () => {
  return {
    padding: previewStyle?.previewWrapperPadding,
    opacity: previewStyle?.previewWrapperOpacity,
  };
};

function getThumbnailURL() {
  const msg = props.replyToMessage as MediaMessage;
  const url = 
    (msg?.getMetadata() as any)?.['@injected']?.extensions?.['thumbnail-generation']?.url_small || 
    (msg?.getData() as any)?.url;
  return proxyImage(url);
}

</script>

<template>
  <div class="bcc__reply_preview__content_wrapper" :style="previewWrapperStyle()">
    <div class="bcc__reply_preview__content_bar" :style="barStyle()"></div>
    <div v-if="props.replyToMessage?.getType() === CometChatUIKitConstants.MessageTypes.image" class="bcc__reply_preview__thumbnail">
      <img :src="getThumbnailURL()" />
    </div>
    <div class="bcc__reply_preview__content">
      <p class="bcc__reply_preview__title" :style="titleStyle()">
        {{ props.titlePrefix + ( getSenderDisplayName(props.replyToMessage) || "" ) || "Reply to ..." }}
      </p>
      <p class="cc__preview__subtitle" :style="subtitleStyle()">
        {{ getMessageTextPreview(props?.replyToMessage) || "‎" }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.bcc__reply_preview__content_wrapper {
  padding: 0 12px;
  position: relative;
  display: grid;
  justify-content: start;
}
.bcc__reply_preview__content_bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 25px;
}
.bcc__reply_preview__content {
  grid-column: 2;
}
.bcc__reply_preview__content > p {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
.bcc__reply_preview__content > .bcc__reply_preview__title {
  margin-bottom: 2px;
}
.bcc__reply_preview__thumbnail {
  grid-column: 1;
  width: 2rem;
  height: 2rem;
  align-self: center;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 5px;
}
.bcc__reply_preview__thumbnail > img {
  width: 100%;
  height: 100%;
}
</style>
