<template>
  <div class="attachment-info">
    <div v-if="attachment.compressedFile" class="attachment-info__quality">
      <div class="attachment-info__quality__title">
        {{ t("file_mode.quality") }}
      </div>
      <div class="d-flex justify-center">
        <div @click="attachment.useCompressed = true" :class="{ 'attachment-info__quality__class': true, selected: attachment.useCompressed, clickable: true }">
          <v-icon>$vuetify.icons.ic_compressed</v-icon>
          <div class="attachment-info__quality__class-name">{{ t("file_mode.compressed") }}</div>
          <div class="attachment-info__quality__class-size">
            <span>{{ attachment.compressedDimensions?.width }} x {{ attachment.compressedDimensions?.height }}</span>
            <span> ({{ formatBytes(attachment.compressedFile.size) }})</span>
          </div>
        </div>
        <div @click="attachment.useCompressed = false" :class="{ 'attachment-info__quality__class': true, selected: !attachment.useCompressed, clickable: true }">
          <v-icon>$vuetify.icons.ic_original</v-icon>
          <div class="attachment-info__quality__class-name">{{ t("file_mode.original") }}</div>
          <div class="attachment-info__quality__class-size">
            <span>{{ attachment.dimensions?.width }} x {{ attachment.dimensions?.height }}</span>
            <span> ({{ formatBytes(attachment.file.size) }})</span>
          </div>
        </div>
      </div>

      <div class="attachment-info__quality__info">
        {{ t(attachment.useCompressed ? "file_mode.metadata_info_compressed" : "file_mode.metadata_info_original") }}
      </div>
    </div>

    <C2PAInfo class="attachment-info__detail-box" v-if="showC2PAInfo || hasExif" :proof="attachment.proof" :metadata="attachment.mediaMetadata" :showFlagsOnly="attachment.useCompressed" />
  </div>
</template>

<script setup lang="ts">
import { Attachment } from "../../models/attachment";
import prettyBytes from "pretty-bytes";
import C2PAInfo from "../content-credentials/C2PAInfo.vue";
import { useI18n } from "vue-i18n";
import { computed } from "vue";

const { t } = useI18n();

const { attachment } = defineProps<{
  attachment: Attachment;
}>();

//console.error("ATTACHMENT", attachment.proof);

const showC2PAInfo = computed(() => {
  return attachment.proof?.integrity?.c2pa !== undefined || attachment.mediaMetadata !== undefined;
});

const hasExif = computed(() => {
  return attachment.proof?.integrity?.exif !== undefined;
});

const formatBytes = (bytes: number) => {
  return prettyBytes(bytes);
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
@use "@/assets/css/sendattachments.scss" as *;
</style>
