<script setup lang="ts">
import type { Assignment, Participant } from "@/services/mentorCockpit";
import { useMentorCockpit } from "@/services/mentorCockpit";
import { computed, onMounted, type Ref } from "vue";
import { useCurrentCourseSession } from "@/composables";
import log from "loglevel";

const props = defineProps<{
  praxisAssignmentId: string;
}>();

const courseSession = useCurrentCourseSession();
const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
const participants = computed(() => mentorCockpitStore.summary.value?.participants);
const praxisAssignment: Ref<Assignment | null> = computed(() =>
  mentorCockpitStore.getAssignmentById(props.praxisAssignmentId)
);

const getParticipantById = (id: string): Participant | null => {
  return participants.value?.find((participant) => participant.id === id) || null;
};

onMounted(() => {
  log.debug("MentorPraxisAssignment mounted");
  mentorCockpitStore.fetchData();
});
</script>

<template>
  <div v-if="praxisAssignment">
    <div class="p-6">
      <h2 class="mb-2">{{ $t("a.Praxisauftrag") }}: {{ praxisAssignment.title }}</h2>
      <span class="text-gray-800">
        Circle «{{ mentorCockpitStore.getCircleTitleById(praxisAssignment.circle_id) }}»
      </span>
      <template v-if="praxisAssignment.pending_evaluations > 0">
        <div class="flex flex-row items-center space-x-2 pt-4">
          <div
            class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 text-sm font-bold"
          >
            <span>{{ praxisAssignment.pending_evaluations }}</span>
          </div>
          <span>{{ $t("a.Ergebnisse abgegeben") }}</span>
        </div>
      </template>
    </div>
    <div class="border-t">
      <div
        v-for="item in praxisAssignment.completions"
        :key="item.user_id"
        class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
      >
        <!-- Left -->
        <div class="flex flex-grow flex-row items-center justify-start">
          <div class="w-80">
            <div class="flex items-center space-x-2">
              <img
                :alt="item.last_name"
                class="h-11 w-11 rounded-full"
                :src="
                  getParticipantById(item.user_id)?.avatar_url ||
                  '/static/avatars/myvbv-default-avatar.png'
                "
              />
              <div>
                <div class="text-bold">
                  {{ getParticipantById(item.user_id)?.first_name }}
                  {{ getParticipantById(item.user_id)?.last_name }}
                </div>
              </div>
            </div>
          </div>
          <!-- Center -->
          <div
            class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20"
          >
            <template v-if="item.status == 'SUBMITTED'">
              <div
                class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
              >
                <span class="flex items-center">
                  <it-icon-check class="h-5 w-5"></it-icon-check>
                </span>
              </div>
              <span>{{ $t("a.Ergebnisse abgegeben") }}</span>
            </template>
            <template v-if="item.status == 'EVALUATED'">
              <div
                class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 bg-green-500 px-3 py-1 text-sm font-bold"
              >
                <span class="flex items-center">
                  <it-icon-check class="h-5 w-5"></it-icon-check>
                </span>
              </div>
              <span>{{ $t("a.Bewertung freigeben") }}</span>
            </template>
          </div>
          <!-- Right -->
          <div>
            <router-link
              v-if="item.status == 'SUBMITTED'"
              class="btn-primary"
              :to="item.url"
            >
              {{ $t("a.Ergebnis bewerten") }}
            </router-link>
            <router-link
              v-else-if="item.status == 'EVALUATED'"
              class="underline"
              :to="item.url"
            >
              {{ $t("a.Bewertung ansehen") }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
