<script setup lang="ts">
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
import { useCurrentCourseSession } from "@/composables";
import { useCSRFFetch } from "@/fetchHelpers";
import { useLearningMentees } from "@/services/learningMentees";
import { computed } from "vue";

const courseSession = useCurrentCourseSession();
const { isLoading, summary, fetchData } = useLearningMentees(courseSession.value.id);

const removeMyMentee = async (relationId: string) => {
  await useCSRFFetch(
    `/api/mentor/${courseSession.value.id}/mentors/${relationId}/delete`
  ).delete();
  fetchData();
};

const noMenteesText = computed(() =>
  courseSession.value.course.configuration.is_uk
    ? "a.Aktuell begleitest du niemanden als Praxisbildner."
    : "a.Aktuell begleitest du niemanden als Lernbegleitung."
);
</script>

<template>
  <div v-if="isLoading" class="m-8 flex justify-center">
    <LoadingSpinner />
  </div>
  <div v-else>
    <h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
    <div
      v-if="(summary?.participant_relations.length ?? 0) > 0"
      class="bg-white px-4 py-2"
    >
      <div
        v-for="relation in summary?.participant_relations ?? []"
        :key="relation.id"
        data-cy="lm-my-mentee-list-item"
        class="flex flex-col items-start justify-between gap-4 border-b py-2 last:border-b-0 md:flex-row md:items-center md:gap-16"
      >
        <div class="flex items-center space-x-2">
          <img
            :alt="relation.participant_user.last_name"
            class="h-11 w-11 rounded-full"
            :src="
              relation.participant_user.avatar_url ||
              '/static/avatars/myvbv-default-avatar.png'
            "
          />
          <div>
            <div class="text-bold">
              {{ relation.participant_user.first_name }}
              {{ relation.participant_user.last_name }}
            </div>
            {{ relation.participant_user.email }}
          </div>
        </div>
        <div class="space-x-5">
          <router-link
            data-cy="lm-my-mentee-profile"
            :to="{
              name: 'profileLearningPath',
              params: {
                userId: relation.participant_user.id,
                courseSlug: courseSession.course.slug,
              },
            }"
            class="underline"
          >
            {{ $t("cockpit.profileLink") }}
          </router-link>
          <button
            class="underline"
            data-cy="lm-my-mentee-remove"
            @click="removeMyMentee(relation.id)"
          >
            {{ $t("a.Entfernen") }}
          </button>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="flex items-center bg-white px-4 py-2">
        <it-icon-info class="it-icon mr-2 h-6 w-6" />
        {{ $t(noMenteesText) }}
      </div>
    </div>
  </div>
</template>
