<script setup lang="ts">
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import { useCurrentCourseSession } from "@/composables";
import { computed, ref } from "vue";
import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { t } from "i18next";

const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
  useCurrentCourseSession().value.id
);

const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);

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

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

const summaries = computed(() => {
  if (selectedCircle.value.id === "_all") {
    return selfEvaluationFeedbackSummaries.summaries.value;
  }
  return selfEvaluationFeedbackSummaries.summaries.value.filter(
    (summary) => summary.circle_id === selectedCircle.value.id
  );
});

const headerTitle = computed(() => {
  const canHaveFeedback =
    selfEvaluationFeedbackSummaries.aggregates.value?.feedback_assessment_visible ??
    false;
  if (canHaveFeedback) {
    return t("a.Selbst- und Fremdeinschätzungen");
  } else {
    return t("a.Selbsteinschätzungen");
  }
});
</script>

<template>
  <div v-if="isLoaded">
    <div class="container-large">
      <div class="col flex items-center justify-between pb-4">
        <h2 class="py-4">{{ headerTitle }}</h2>
        <ItDropdownSelect
          v-model="selectedCircle"
          class="text-bold w-24 min-w-[18rem] border-2 border-gray-300"
          :items="circles"
          borderless
        ></ItDropdownSelect>
      </div>
      <div class="space-y-3">
        <FeedbackByLearningUnitSummary
          v-for="summary in summaries"
          :key="summary.id"
          :summary="summary"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
