<script setup lang="ts">
import { computed } from "vue";
import {
  type FeedbackRequest,
  getFeedbackEvaluationCaption,
  getSelfEvaluationCaption,
  getSmiley,
} from "@/services/selfEvaluationFeedback";

const props = defineProps<{
  feedback: FeedbackRequest;
}>();

const feedbackRequesterAvatar = computed(() => {
  return props.feedback.feedback_requester_user.avatar_url;
});

const feedbackRequesterName = computed(() => {
  return `${props.feedback.feedback_requester_user.first_name} ${props.feedback.feedback_requester_user.last_name}`;
});
</script>

<template>
  <div
    v-for="(criteria, index) in props.feedback.criteria"
    :key="criteria.course_completion_id"
    class="pb-10"
  >
    <span class="text-gray-900">{{ criteria.title }}</span>
    <div class="mt-3 grid grid-cols-2 border-2 border-gray-200">
      <!-- Feedback requester assessment -->
      <div class="flex h-12 items-center pl-4">
        <b>
          {{
            $t("a.Selbsteinschätzung von FEEDBACK_REQUESTER_NAME", {
              FEEDBACK_REQUESTER_NAME: feedbackRequesterName,
            })
          }}
        </b>
        <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackRequesterAvatar" />
      </div>
      <div class="flex items-center justify-start space-x-2 bg-white">
        <component :is="getSmiley(criteria.self_assessment)" class="h-6 w-6" />
        <span>{{ getSelfEvaluationCaption(criteria.self_assessment) }}</span>
      </div>

      <!-- Feedback provider assessment -->
      <div class="flex h-12 items-center bg-gray-200 pl-4">
        <b>{{ $t("a.Deine Fremdeinschätzung") }}</b>
      </div>
      <div class="flex items-center justify-between bg-gray-200">
        <div class="flex justify-start space-x-2">
          <component :is="getSmiley(criteria.feedback_assessment)" class="h-6 w-6" />
          <span>
            {{
              getFeedbackEvaluationCaption(
                criteria.feedback_assessment,
                feedback.feedback_requester_user
              )
            }}
          </span>
        </div>
        <router-link
          v-if="!feedback.feedback_submitted"
          :to="{
            name: 'mentorSelfEvaluationFeedback',
            params: { learningUnitId: feedback.learning_unit_id },
            query: { step: index },
          }"
          class="mr-4 underline"
        >
          {{ $t("a.Bearbeiten") }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
