<script setup lang="ts">
import type { Assignment } from "@/services/learningMentees";
import { useLearningMentees } from "@/services/learningMentees";
import { useCurrentCourseSession } from "@/composables";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed, type Ref, ref } from "vue";
import PraxisAssignmentItem from "@/components/learningMentor/PraxisAssignmentItem.vue";
import { useTranslation } from "i18next-vue";
import SelfAssignmentFeedbackAssignmentItem from "@/components/learningMentor/SelfAssignmentFeedbackAssignmentItem.vue";

const { t } = useTranslation();
const courseSession = useCurrentCourseSession();

const learningMentees = useLearningMentees(courseSession.value.id);
const summary = learningMentees.summary;

const statusFilterValue = ref({ name: t("a.Zu erledigen"), id: "_todo" });

const statusFilter = ref([
  { name: t("Alle"), id: "_all" },
  { name: t("a.Zu erledigen"), id: "_todo" },
]);

const circleFilterValue = ref({ name: t("a.AlleCircle"), id: "_all" });

const circleFilter = computed(() => {
  if (!summary.value) return [];

  return [
    { name: t("a.AlleCircle"), id: "_all" },
    ...summary.value.circles.map((circle) => ({
      name: `Circle: ${circle.title}`,
      id: circle.id,
    })),
  ];
});

const filteredAssignments: Ref<Assignment[]> = computed(() => {
  if (!summary.value) return [];

  let filtered = summary.value.assignments;

  if (statusFilterValue.value.id !== "_all") {
    filtered = filtered.filter((item) => item.pending_evaluations > 0);
  }

  if (circleFilterValue.value.id !== "_all") {
    filtered = filtered.filter(
      (item) => item.circle_id === String(circleFilterValue.value.id)
    );
  }

  return filtered;
});
</script>

<template>
  <template v-if="summary">
    <h2 class="heading-2 mb-6 mt-6">{{ t("a.Das wurde mit dir geteilt") }}</h2>
    <div class="flex flex-col bg-white pb-5 pt-1">
      <div class="flex flex-col lg:flex-row lg:space-x-2">
        <ItDropdownSelect
          v-model="statusFilterValue"
          class="min-w-[10rem]"
          :items="statusFilter"
          borderless
        ></ItDropdownSelect>
        <ItDropdownSelect
          v-model="circleFilterValue"
          class="min-w-[18rem]"
          :items="circleFilter"
          borderless
        ></ItDropdownSelect>
      </div>
      <template v-if="filteredAssignments.length > 0">
        <template v-for="item in filteredAssignments" :key="item.id">
          <PraxisAssignmentItem
            v-if="item.type === 'praxis_assignment'"
            :circle-title="learningMentees.getCircleTitleById(item.circle_id)"
            :pending-tasks="item.pending_evaluations"
            :task-link="{
              name: 'learningMentorPraxisAssignments',
              params: { praxisAssignmentId: item.id },
            }"
            :task-title="item.title"
          />
          <SelfAssignmentFeedbackAssignmentItem
            v-else-if="item.type === 'self_evaluation_feedback'"
            :circle-title="learningMentees.getCircleTitleById(item.circle_id)"
            :pending-tasks="item.pending_evaluations"
            :task-link="{
              name: 'learningMentorSelfEvaluationFeedbackAssignments',
              params: { learningUnitId: item.id },
            }"
            :task-title="item.title"
          />
        </template>
      </template>
      <div v-else class="mx-5 flex flex-row items-center bg-green-200 pl-2">
        <it-icon-check class="it-icon"></it-icon-check>
        <p class="py-4 text-base">{{ $t("a.Du hast alles erledigt.") }}</p>
      </div>
    </div>
  </template>
</template>
