<script setup lang="ts">
import PraxisAssignmentItem from "@/components/learningMentor/PraxisAssignmentItem.vue";
import SelfAssignmentFeedbackAssignmentItem from "@/components/learningMentor/SelfAssignmentFeedbackAssignmentItem.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useAssignmentTodoListStore } from "@/stores/learningMentor/assignmentTodoList";

const assignmentTodoListStore = useAssignmentTodoListStore();
</script>

<template>
  <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="assignmentTodoListStore.selectedStatus"
        class="min-w-[10rem]"
        :items="assignmentTodoListStore.statusOptions"
        borderless
      ></ItDropdownSelect>
      <ItDropdownSelect
        v-model="assignmentTodoListStore.selectedCircle"
        class="min-w-[18rem]"
        :items="assignmentTodoListStore.circleOptions"
        borderless
      ></ItDropdownSelect>
    </div>
    <template v-if="assignmentTodoListStore.filteredAssignments.length > 0">
      <template
        v-for="item in assignmentTodoListStore.filteredAssignments"
        :key="item.id"
      >
        <PraxisAssignmentItem
          v-if="item.type === 'praxis_assignment'"
          :circle-title="item.circle_name"
          :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="item.circle_name"
          :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>
