<script setup lang="ts">
import {
  type Criterion,
  getFeedbackEvaluationCaption,
} from "@/services/selfEvaluationFeedback";
import type { User } from "@/types";
import { computed } from "vue";

const props = defineProps<{
  criteria: Criterion;
  requester: User;
}>();

const emit = defineEmits(["evaluation"]);

const fullname = computed(
  () => `${props.requester.first_name} ${props.requester.last_name}`
);

const description = computed(() => `«${props.criteria.title}»`);
const currentEvaluation = computed(() => props.criteria.feedback_assessment);

const onPassed = () => {
  emit("evaluation", props.criteria, "SUCCESS");
};

const onFailed = () => {
  emit("evaluation", props.criteria, "FAIL");
};
</script>

<template>
  <div class="mt-16 space-y-4 bg-gray-200 p-7">
    <span>{{ $t("a.Leistungsziel") }}:</span>
    <div class="text-bold text-xl">{{ description }}</div>
  </div>
  <div class="mt-16 flex flex-row items-center pb-4">
    <span class="text-2xl font-bold">
      {{ $t("a.Kann FULLNAME das?", { FULLNAME: fullname }) }}
    </span>
    <img class="ml-4 h-12 w-12 rounded" :src="requester.avatar_url" :alt="fullname" />
  </div>
  <div class="flex space-x-10">
    <button
      class="inline-flex flex-1 items-center border-2 p-4 text-left"
      :class="currentEvaluation === 'SUCCESS' ? 'border-green-500' : 'border-gray-300'"
      @click="onPassed"
    >
      <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
      <span class="text-lg font-bold">
        {{ getFeedbackEvaluationCaption("SUCCESS", requester) }}
      </span>
    </button>
    <button
      class="inline-flex flex-1 items-center border-2 p-4 text-left"
      :class="currentEvaluation === 'FAIL' ? 'border-orange-500' : 'border-gray-300'"
      @click="onFailed"
    >
      <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
      <span class="text-lg font-bold">
        {{ getFeedbackEvaluationCaption("FAIL", requester) }}
      </span>
    </button>
  </div>
</template>

<style scoped></style>
