<script setup lang="ts">
import type { LearningUnit, LearningUnitPerformanceCriteria } from "@/types";
import { useLearningMentors } from "@/composables";
import { ref } from "vue";
import ItButton from "@/components/ui/ItButton.vue";
import NoMentorInformationPanel from "@/components/mentor/NoMentorInformationPanel.vue";

defineProps<{
  learningUnit: LearningUnit;
  criteria: LearningUnitPerformanceCriteria[];
}>();

const selectedLearningMentor = ref();
const learningMentors = useLearningMentors().learningMentors;
const onSubmitForMentorFeedback = async () => {
  try {
    console.log("submit for mentor feedback");
  } catch (error) {
    console.log("Could not submit assignment", error);
  }
};
</script>

<template>
  <div class="w-full pt-8">
    <div class="w-full border border-gray-400">
      <div class="m-6 space-y-6">
        <h3 class="heading-3">
          {{ $t("a.Selbsteinschätzung teilen") }}
        </h3>
        <div v-if="!learningMentors?.length">
          <p>
            {{
              $t(
                "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt."
              )
            }}
          </p>
          <select v-model="selectedLearningMentor" data-cy="select-learning-mentor">
            <option
              v-for="learningMentor in learningMentors"
              :key="learningMentor.id"
              :value="learningMentor.mentor"
            >
              {{ learningMentor.mentor.first_name }}
              {{ learningMentor.mentor.last_name }}
            </option>
          </select>
          <ItButton
            class="mt-6"
            variant="primary"
            size="large"
            :disabled="!selectedLearningMentor"
            data-cy="submit-assignment"
            @click="onSubmitForMentorFeedback"
          >
            <p v-if="!selectedLearningMentor">
              {{ $t("a.Selbsteinschätzung teilen") }}
            </p>
            <p v-else-if="learningMentors?.length == 0">
              {{
                $t("a.Selbsteinschätzung mit MENTOR_NAME teilen", {
                  MENTOR_NAME: selectedLearningMentor.first_name,
                })
              }}
            </p>
          </ItButton>
        </div>
        <div v-else>
          <NoMentorInformationPanel />
        </div>
      </div>
    </div>
  </div>

  <div
    v-for="(pc, index) in criteria"
    :key="pc.id"
    class="flex flex-col space-y-4 border-t border-gray-400"
  >
    <div class="flex justify-between">
      <b>{{ pc.title }}</b>
      <router-link :to="`${learningUnit.evaluate_url}?step=${index}`" class="underline">
        {{ $t("a.Bearbeiten") }}
      </router-link>
    </div>
    <div v-if="pc.completion_status == 'SUCCESS'">
      <it-icon-smiley-happy class="h-6 w-6" />
      {{ $t("selfEvaluation.yes") }}
    </div>
    <div v-else>
      <it-icon-smiley-thinking class="h-6 w-6" />
      {{ $t("selfEvaluation.no") }}
    </div>
  </div>
</template>

<style scoped></style>
