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

log.debug("DashboardAsideWidget created");

const { loading, dashboardPersons, dashboardDueDates } = useDashboardPersonsDueDates();

const displayDueDates = computed(() => {
  return _.take(dashboardDueDates.value, 6);
});
</script>

<template>
  <div>
    <div v-if="loading" class="m-8 flex justify-center">
      <LoadingSpinner />
    </div>
    <div v-else>
      <section class="border-b p-8">
        <h3 class="mb-4">{{ dashboardPersons.length }} {{ $t("a.Personen") }}</h3>
        <div>
          <router-link class="btn-secondary" to="/dashboard/persons">
            {{ $t("a.Alle Personen anzeigen") }}
          </router-link>
        </div>
      </section>

      <section v-if="dashboardDueDates.length > 0" class="p-8">
        <h3>{{ $t("a.Termine") }}</h3>

        <div v-for="dueDate in displayDueDates" :key="dueDate.id">
          <div class="border-b">
            <DueDateSingle :due-date="dueDate" />
          </div>
        </div>

        <router-link class="btn-secondary mt-4" to="/dashboard/due-dates">
          {{ $t("a.Alle Termine anzeigen") }}
        </router-link>
      </section>
    </div>
  </div>
</template>
