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


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

const imgDimensions = (props.message?.getMetadata() as any)?.dimensions || { width: 300, height: 150 };

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

async function openImageInFullScreen() {
  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() || props.src;
  openFullscreenView.value = true;
}

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

<template>
  <div class="bcc-image_container">
      <div class="bg-gradient-to-tr from-brand-200 to-brand-50 dark:from-brand-900 dark:to-brand-700"
        :class="{ 'animate-pulse': !imageLoaded }"
        :style="!imageLoaded ? `width: ${imgDimensions.width}px; height: ${imgDimensions.height}px` : ''"
      >
        <img @load="imageLoaded = true" :src="src" @click="openImageInFullScreen" />
      </div>
  </div>
  <BccCometChatFullScreenViewer
    v-if="openFullscreenView"
    @CcCloseClicked="closeImageInFullScreen"
    :placeholder-image="placeholderImage"
    :url="imageurlToOpen"
  />
</template>

<style scoped>
.bcc-image_container {
  max-height: 300px;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  min-height: 28px;
  min-width: 84px;
}
.bcc-image_container img {
  max-height: 500px;
  max-width: 400px;
  object-fit: contain;
  object-position: center;
  position: relative;
}

.bcc-image_container .placeholder::before {
  content: "⌛";
}
</style>
