<template>
  <div class="cc-detail-info" v-if="infoText !== undefined" v-html="infoText" />
  <div class="attachment-info__detail-box" v-if="!showFlagsOnly">
    <div class="detail-title">
      {{ t("cc.details") }}
      <v-icon v-if="hasC2PA">$vuetify.icons.ic_cr</v-icon>
    </div>

    <CCProperty v-for="d in details" :icon="d.icon" :title="d.title" :value="d.value">
      <template v-if="d.link" v-slot:default>
        <a :href="d.link">{{ d.value }}</a>
      </template>
    </CCProperty>
  </div>
  <div v-if="!showFlagsOnly">
    <div class="attachment-info__verify-info" v-if="hasC2PA">
      <i18n-t keypath="cc.cc_info" tag="span">
        <template v-slot:link>
          <a href="https://contentcredentials.org/verify" target="_blank">{{ $t("cc.cc_info_link") }}</a>
          <v-icon color="white">$vuetify.icons.ic_copy</v-icon>
        </template>
      </i18n-t>
    </div>
    <div class="attachment-info__verify-info" v-else-if="metadata">
      {{ t("cc.cc_no_info") }}
    </div>
    <div class="attachment-info__verify-info" v-else-if="props.metaStripped">
      {{ t("cc.metadata-stripped") }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Proof, MediaMetadata, MediaInterventionFlags, mediaMetadataToMediaInterventionFlags } from "../../models/proof";
import { computed, ref, Ref, watch } from "vue";
import dayjs from "dayjs";
import CCProperty, { CCPropertyProps } from "./CCProperty.vue";
import relativeTime from "dayjs/plugin/relativeTime";
import { interventionText } from "./intervention";

dayjs.extend(relativeTime);

const { t } = useI18n();

const props = defineProps<{
  proof?: Proof;
  metadata?: MediaMetadata;
  interventionFlags?: MediaInterventionFlags;
  metaStripped?: boolean;
  showFlagsOnly?: boolean;
}>();

const infoText: Ref<string | undefined> = ref(undefined);
const details: Ref<(CCPropertyProps & { link?: string })[]> = ref([]);

const hasC2PA = computed(() => {
  return props.proof?.integrity?.c2pa !== undefined;
});

const updateDetails = () => {
  let d: (CCPropertyProps & { link?: string })[] = [];

  if (props.metadata?.device) {
    d.push({
      icon: "$vuetify.icons.ic_media_camera",
      title: t("file_mode.cc_source"),
      value: props.metadata?.device,
    });
  }

  if (props.metadata?.creationDate) {
    d.push({
      icon: "$vuetify.icons.ic_exif_time",
      title: t("file_mode.cc_capture_timestamp"),
      value: dayjs(props.metadata.creationDate)?.format("lll"),
    });
  }

  const exif = props.proof?.integrity?.exif;
  if (exif) {
    const getSimpleValue = (key: string): string | undefined => {
      return exif ? (exif[key] as string)?.replace(/^"(.+(?="$))"$/, "$1") : undefined;
    };

    const toDegrees = (dms: string | undefined, direction: string) => {
      if (!dms || dms.length == 0) return undefined;
      var parts = dms.split(/deg|min|sec/);
      var d = parts[0];
      var m = parts[1];
      var s = parts[2];
      var deg = (Number(d) + Number(m) / 60 + Number(s) / 3600).toFixed(6);
      if (direction == "S" || direction == "W") {
        deg = "-" + deg;
      }
      return deg;
    };

    // Location
    try {
      const lat = toDegrees(getSimpleValue("GPSLatitude"), getSimpleValue("GPSLatitudeRef") ?? "");
      const lon = toDegrees(getSimpleValue("GPSLongitude"), getSimpleValue("GPSLongitudeRef") ?? "");
      if (lat && lon && lat.length > 0 && lon.length > 0) {
        const location = lat + " " + lon;
        const link =
          "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(lat) + "," + encodeURIComponent(lon);
        d.push({
          icon: "$vuetify.icons.ic_exif_location",
          title: t("file_mode.cc_location"),
          value: location,
          link: link,
        });
      }
    } catch (error) { }
  }

  details.value = d;
};

watch(
  props,
  () => {
    infoText.value = props.metadata ? 
      interventionText(t, mediaMetadataToMediaInterventionFlags(props.metadata)) : 
      props.interventionFlags ? interventionText(t, props.interventionFlags) : undefined;
    updateDetails();
  },
  { immediate: true }
);
</script>

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