<template>
  <v-row no-gutters style="background-color: #eff3fe">
    <v-row no-gutters>
      <v-col class="px-4 py-3">
        <div>
          <p class="font-weight-bold" style="margin: 0">
            {{ annotation.Description ? t('labels.description') : t('labels.smartDescription') }}
          </p>
          <p>
            {{ annotation.Description ?? aiData?.GptResponse }}
          </p>
        </div>
      </v-col>
    </v-row>
    <v-row v-if="hasActions" no-gutters>
      <v-col class="px-4 py-3">
        <span class="font-weight-bold">{{ t('labels.resources') }}</span>
        <div>
          <template v-for="action in annotation.CallToAction!.Actions" :key="action.ActionData.Url">
            <a class="minsk-500 text-xs-medium" :href="action.ActionData.Url" target="_blank">
              {{ action.ActionData.Description }}
            </a>
            <v-icon class="minsk-500 ml-1" icon="arrow_outward" />
            <br />
          </template>
        </div>
      </v-col>
    </v-row>
    <v-row v-if="aiData" no-gutters>
      <v-col class="font-weight-bold px-4 py-3">
        <span>{{ t('labels.annotivaAi') }}</span>
        <div class="pt-1">
          <template v-for="question in aiData.FollowupQuestions" :key="question.Question">
            <v-chip
              size="small"
              label
              variant="outlined"
              style="border-radius: 8px; height: 10px"
              class="custom-chip text-wrap text-xs-semibold"
              @click="selectAction(question)"
            >
              {{ question.Question }}
            </v-chip>
            <br />
          </template>
        </div>
      </v-col>
    </v-row>
    <ask-ai-modal v-model="m_askAi" :title="annotation.Title" :gpt-question="gptQuestion" @askFollowup="askFollowUp" />
  </v-row>
</template>

<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { GptService } from '@/services/gpt.service';
import { useI18n } from 'vue-i18n';
import { DataOverlayAnnotation, GptQuestion, GptResponsePayload } from '@3cr/viewer-types-ts';

interface Props {
  annotation: DataOverlayAnnotation;
}

const props = defineProps<Props>();

const { t } = useI18n();

const m_askAi = ref<boolean>(false);
const aiData = ref<GptResponsePayload>();
const gptQuestion = ref<GptQuestion>({ Question: '', ApiPreFilledRequestKey: 0 });

const hasActions = computed(() => {
  return !!props.annotation.CallToAction && props.annotation.CallToAction.Actions.length > 0;
});

watch(
  () => props.annotation,
  async () => {
    await generateAiData();
  },
  { immediate: true }
);

async function generateAiData(): Promise<void> {
  if (!aiData.value) {
    aiData.value = await GptService.Instantiate()
      .GenerateAnnotations(props.annotation.Title)
      .then((data) => data.data)
      .catch(() => ({ GptResponse: 'failed to execute', FollowupQuestions: [] }));
  }
}

async function askFollowUp(question: GptQuestion): Promise<void> {
  m_askAi.value = false;
  await nextTick();
  gptQuestion.value = question;
  m_askAi.value = true;
}

async function selectAction(question: GptQuestion): Promise<void> {
  gptQuestion.value = question;
  m_askAi.value = true;
}
</script>

<style scoped lang="scss">
@use '@/assets/palette' as palette;

.v-row {
  color: map-get(palette.$shark, 950);
  background-color: map-get(palette.$minsk, 50);
}

span {
  font-size: 12px;
}

p {
  font-size: 11px;
}

:deep(.v-chip) {
  text-wrap: wrap;
  word-wrap: break-word;
  font-size: 11px;
  min-height: 42px;
  line-height: 14px !important;
  height: unset;
  padding: 4px 8px;
}

:deep(.v-chip ~ .v-chip) {
  margin-top: 4px;
}

.custom-chip {
  border: 1px solid #c9d7fc;
  color: #2e3176;
  background-color: white;
  border-radius: 8px;
}
</style>
