<template>
  <div class="cc-summary" v-if="flags.length > 0 && infoText.length > 0">
    <v-icon class="intervention-icon">{{
      showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
    }}</v-icon
    ><span class="common-caption-small" v-html="infoText" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ProofHintFlags } from "../../models/proof";

const { multiple, flags } = defineProps<{
  multiple: boolean;
  flags: ProofHintFlags[];
}>();

const showCheck = computed(() => {
  if (!multiple && flags.length == 1) {
    return flags[0].generatorSource === "c2pa";
  } else if (multiple) {
    return flags.some((f) => f.generatorSource === "c2pa")
  }
  return false;
});

const infoText = computed(() => {
  if (!multiple && flags.length == 1) {
    if (flags[0].generator === "ai") {
      return "<b>This image is generated by AI.</b> Take a closer look at the file details.";
    } else if (flags[0].generator === "screenshot") {
      return "<b>This is a screenshot.</b> Take a closer look at the file details.";
    }
  } else if (flags.some((f) => f.generator === "ai")) {
    return "<b>Contains AI generated media.</b> Take a closer look at the file details for each.";
  } else if (flags.some((f) => f.generator === "screenshot")) {
    return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
  }
  return "TODO - Content Credentials Info";
});
</script>

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

.cc-summary {
  text-align: start;
  .intervention-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
  }
}
</style>
