<script setup lang="ts">
import { ref } from 'vue';
import BccCometChatFullScreenViewer from './BccCometChatFullScreenViewer.vue';
import { MediaMessage } from '@cometchat/chat-sdk-javascript';


const props = defineProps({
  src: {
    type: String,
    default: null
  },
  placeholderImage: {
    type: String
  },
  imageStyle: {
    type: Object
  },
  message: {
    type: MediaMessage
  }
})

const imageStyle = {
  height: "auto",
  maxHeight: "500px",
  maxWidth: "400px",
  ...props.imageStyle
};

const onePixelPlaceholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
const wideThinTransparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAABCAQAAADnCUy4AAAAF0lEQVR42mNkGAWjYBSMglEwCkbBkAcAD6IAAqr+AZEAAAAASUVORK5CYII=";
const height300pxImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAQAAACoWRFeAAAAE0lEQVR42mNkYGAcRaNoFA0cAgAUvAEtNFICWAAAAABJRU5ErkJggg==";

const imgDimensions = (props.message?.getMetadata() as any)?.dimensions;
const numericAspectRatio = imgDimensions ? imgDimensions.width / imgDimensions.height : undefined;
const isLandscape = imgDimensions ? imgDimensions.height < imgDimensions.width : undefined;

let aspectRatio: string | undefined;
if (numericAspectRatio !== undefined && numericAspectRatio <= 0.28) { // 0.28 is the minimum aspect ratio before min-width is reached.
  aspectRatio = "0.28 / 1";
} else if (numericAspectRatio !== undefined && numericAspectRatio >= 8) { // 8 is the maximum aspect ratio before min-height is reached.
  aspectRatio = "8 / 1";
} else if (imgDimensions) {
  aspectRatio = `${imgDimensions.width}/${imgDimensions.height}`;
}

const openFullscreenView = ref(false);
const imageurlToOpen = ref("");

async function openImageInFullScreen(thisObj: any) {
  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() ?? thisObj.detail.url;
  openFullscreenView.value = true;
}

function closeImageInFullScreen() {
  imageurlToOpen.value = "";
  openFullscreenView.value = false;
}
</script>

<template>
  <div class="bcc-image_container">
    <div class="placeholder" v-if="imgDimensions != undefined" :class="{ 'landscape': isLandscape }" :style="{ 'aspect-ratio': aspectRatio }">
      <img :src="isLandscape ? wideThinTransparentImage : height300pxImage" />
    </div>
    <cometchat-image-bubble
      :src="props.src"
      :placeholderImage="imgDimensions ? onePixelPlaceholderImage : props.placeholderImage"
      :imageStyle="imageStyle"
      :onCcImageClicked="openImageInFullScreen"
    />
  </div>
  <BccCometChatFullScreenViewer v-if="openFullscreenView"
    :onCcCloseClicked="closeImageInFullScreen"
    :URL="imageurlToOpen"
  />
</template>

<style scoped>
.bcc-image_container {
  max-height: 300px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  min-height: 28px;
  min-width: 84px;
}

/* Placeholder styles */
.placeholder {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cc__accent200, #3e8e7526); /* Placeholder background color */
  grid-row-start: 1;
  grid-column-start: 1;
  position: relative;
  z-index: -1;
}

.placeholder::before {
  content: "⌛";
  position: absolute;
}

.placeholder.landscape > img {
  width: 100%;
}

cometchat-image-bubble {
  display: block;
  max-width: 100%;
  grid-row-start: 1;
  grid-column-start: 1;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
</style>
