<script setup lang="ts">
import SmileyCell from "@/components/selfEvaluationFeedback/SmileyCell.vue";
import type { LearningUnitSummary } from "@/services/selfEvaluationFeedback";
import { computed } from "vue";

const props = defineProps<{
  summary: LearningUnitSummary;
  hideDetailLink?: boolean;
}>();

const hasFeedbackReceived = computed(() => {
  return props.summary.feedback_assessment?.submitted_by_provider ?? false;
});

const feedbackProviderAvatar = computed(() => {
  return props.summary.feedback_assessment?.provider_user.avatar_url ?? "";
});

const feedbackProviderName = computed(() => {
  if (!props.summary.feedback_assessment?.provider_user) {
    return "";
  } else {
    return `${props.summary.feedback_assessment.provider_user.first_name} ${props.summary.feedback_assessment.provider_user.last_name}`;
  }
});
</script>

<template>
  <div class="bg-white" data-cy>
    <!-- Top Row -->
    <div class="flex items-center justify-between border-b-2 border-gray-200 p-4">
      <div class="flex flex-col">
        <b>{{ props.summary.title }}</b>
        <span>Circle «{{ props.summary.circle_title }}»</span>
      </div>
      <span class="pl-4 underline">
        <router-link
          v-if="!props.hideDetailLink"
          :to="props.summary.detail_url"
          :data-cy="`self-eval-${summary.id}-detail-url`"
        >
          {{ $t("a.Selbsteinschätzung anschauen") }}
        </router-link>
      </span>
    </div>
    <div class="ml-4 mr-4">
      <!-- Self Assessment Row-->
      <div class="flex pb-2 pt-2">
        <div class="w-1/2">
          {{ $t("a.Deine Selbsteinschätzung") }}
        </div>
        <div class="smily-row">
          <SmileyCell
            :count="props.summary.self_assessment.counts.pass"
            :cypress-identifier="`self-eval-${props.summary.id}-pass`"
            smiley="it-icon-smiley-happy"
          />
          <SmileyCell
            :count="props.summary.self_assessment.counts.fail"
            :cypress-identifier="`self-eval-${props.summary.id}-fail`"
            smiley="it-icon-smiley-thinking"
          />
          <SmileyCell
            :count="props.summary.self_assessment.counts.unknown"
            :cypress-identifier="`self-eval-${props.summary.id}-unknown`"
            smiley="it-icon-smiley-neutral"
          />
        </div>
      </div>
      <!-- Feedback Assessment Row -->
      <div v-if="hasFeedbackReceived" class="border-t-2 border-gray-200">
        <div class="flex pb-2 pt-2">
          <div class="flex w-1/2 items-center">
            <span>
              {{
                $t("a.Fremdeinschätzung von FEEDBACK_PROVIDER_NAME", {
                  FEEDBACK_PROVIDER_NAME: feedbackProviderName,
                })
              }}
            </span>
            <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
          </div>
          <div class="smily-row">
            <SmileyCell
              :count="props.summary.feedback_assessment?.counts.pass ?? 0"
              smiley="it-icon-smiley-happy"
            />
            <SmileyCell
              :count="props.summary.feedback_assessment?.counts.fail ?? 0"
              smiley="it-icon-smiley-thinking"
            />
            <SmileyCell
              :count="props.summary.feedback_assessment?.counts.unknown ?? 0"
              smiley="it-icon-smiley-neutral"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.smily-row {
  @apply flex flex-1 justify-end pl-8 lg:justify-start;
}
</style>
