<script lang="ts" setup>
import { useDashboardPersonsDueDates } from "@/composables";
import { computed } from "vue";
import _ from "lodash";
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";

const props = withDefaults(
  defineProps<{
    courseSessionId: string;
    circleId?: string;
    maxCount?: number;
    showAllButton?: boolean;
  }>(),
  {
    maxCount: 3,
    circleId: undefined,
    showAllButton: false,
  }
);

const { loading, currentDueDates } = useDashboardPersonsDueDates();

const filteredDueDates = computed(() => {
  let dueDates = currentDueDates.value.filter(
    (dueDate) => dueDate.course_session_id === props.courseSessionId
  );

  if (props.circleId) {
    dueDates = dueDates.filter((dueDate) => dueDate.circle?.id === props.circleId);
  }
  return _.take(dueDates, props.maxCount);
});
</script>

<template>
  <div v-if="loading" class="m-8 flex justify-center">
    <LoadingSpinner />
  </div>
  <div v-else class="flex flex-col space-y-2">
    <h3 class="heading-3">{{ $t("Nächste Termine") }}</h3>
    <div
      v-for="dueDate in filteredDueDates"
      :key="dueDate.id"
      class="border-t border-gray-500 pt-2"
    >
      <DueDateSingle :due-date="dueDate"></DueDateSingle>
    </div>
    <div v-if="filteredDueDates.length === 0">
      {{ $t("dueDates.noDueDatesAvailable") }}
    </div>
  </div>

  <router-link
    v-if="showAllButton"
    class="btn-secondary mt-4"
    :to="`/dashboard/due-dates?session=${courseSessionId}`"
  >
    {{ $t("a.Alle Termine anzeigen") }}
  </router-link>
</template>
