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

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

const feedbackProviderAvatar = computed(() => {
  return props.feedback.feedback_provider_user.avatar_url;
});

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

<template>
  <div
    v-for="criteria in props.feedback.criteria"
    :key="criteria.course_completion_id"
    class="mb-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.Deine Selbsteinschätzung") }}</b>
      </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.Fremdeinschätzung von FEEDBACK_PROVIDER_NAME", {
              FEEDBACK_PROVIDER_NAME: feedbackProviderName,
            })
          }}
        </b>
        <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
      </div>
      <div class="flex items-center justify-start space-x-2 bg-gray-200">
        <component :is="getSmiley(criteria.feedback_assessment)" class="h-6 w-6" />
        <span>{{ getFeedbackReceivedCaption(criteria.feedback_assessment) }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
