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

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

const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
const summary = mentorCockpitStore.summary;

const statusFilterValue = ref({ name: t("Alle"), id: "_all" });

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>
  <div v-if="summary" class="bg-white">
    <div class="flex flex-col space-x-2 lg:flex-row">
      <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-for="item in filteredAssignments" :key="item.id">
      <PraxisAssignmentItem
        v-if="item.type === 'praxis_assignment'"
        :circle-title="mentorCockpitStore.getCircleTitleById(item.circle_id)"
        :pending-tasks="item.pending_evaluations"
        :task-link="{
          name: 'mentorCockpitPraxisAssignments',
          params: { praxisAssignmentId: item.id },
        }"
        :task-title="item.title"
      />
      <SelfAssignmentFeedbackAssignmentItem
        v-else-if="item.type === 'self_evaluation_feedback'"
        :circle-title="mentorCockpitStore.getCircleTitleById(item.circle_id)"
        :pending-tasks="item.pending_evaluations"
        :task-link="{
          name: 'mentorCockpitSelfEvaluationFeedbackAssignments',
          params: { learningUnitId: item.id },
        }"
        :task-title="item.title"
      />
    </template>
  </div>
</template>
