<script setup lang="ts">
import { PlaceholderImage } from '@cometchat/chat-uikit-vue';
import { computed } from 'vue';

const props = defineProps({
  captionedAttachment: { type: Object, default: {} },
  previewStyle: { type: Object, default: {} },
});

const previewUrl = computed(() => {
  if (!props.captionedAttachment?.fileObject)
    return PlaceholderImage;

  const blob = new Blob([props.captionedAttachment.fileObject]);
  return URL.createObjectURL(blob);
});

function imgLoaded(event: Event) {
  if (props.captionedAttachment) {
    props.captionedAttachment.dimensions = {
      width: (event.target as HTMLImageElement)?.naturalWidth,
      height: (event.target as HTMLImageElement)?.naturalHeight
    };
  }
}
</script>

<template>
  <div class="bcc__attachment_preview__content_wrapper">
    <div class="bcc__attachment_preview__content">
      <img :src="previewUrl" @load="imgLoaded" />
    </div>
  </div>
</template>

<style scoped>
.bcc__attachment_preview__content_wrapper {
  padding: 0 5px 0 20px;
  position: relative;
  width: 100%;
}

.bcc__attachment_preview__content {
  width: 100%;
  max-height: 350px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bcc__attachment_preview__content>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
