<script setup lang="ts">
import { computed, ref, watch } from "vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useTranslation } from "i18next-vue";
import type { StatisticsCourseSessionPropertiesType } from "@/gql/graphql";

const { t } = useTranslation();

interface Item {
  _id: string;
  course_session_id: string;
  generation: string;
  circle_id: string;
}

const props = defineProps<{
  items: Item[];
  courseSessionProperties: StatisticsCourseSessionPropertiesType;
}>();

const sessionFilter = computed(() => {
  const f = props.courseSessionProperties.sessions.map((session) => ({
    name: `${t("a.Durchfuehrung")}: ${session.name}`,
    id: session.id,
  }));
  return [{ name: t("a.AlleDurchführungen"), id: "_all" }, ...f];
});

const generationFilter = computed(() => {
  const f = props.courseSessionProperties.generations.map((generation) => ({
    name: `${t("a.Generation")}: ${generation}`,
    id: generation,
  }));
  return [{ name: t("a.AlleGenerationen"), id: "_all" }, ...f];
});

const circleFilter = computed(() => {
  const f = props.courseSessionProperties.circles.map((circle) => ({
    name: `Circle: ${circle.name}`,
    id: circle.id,
  }));
  return [{ name: t("a.AlleCircle"), id: "_all" }, ...f];
});

const sessionFilterValue = ref(sessionFilter.value[0]);
const generationFilterValue = ref(generationFilter.value[0]);
const circleFilterValue = ref(circleFilter.value[0]);

watch(
  () => props.courseSessionProperties,
  () => {
    sessionFilterValue.value = sessionFilter.value[0];
    generationFilterValue.value = generationFilter.value[0];
    circleFilterValue.value = circleFilter.value[0];
  },
  { deep: true }
);

const filteredItems = computed(() => {
  return props.items.filter((item) => {
    const sessionMatch =
      sessionFilterValue.value.id === "_all" ||
      item.course_session_id === sessionFilterValue.value.id;
    const generationMatch =
      generationFilterValue.value.id === "_all" ||
      item.generation === generationFilterValue.value.id;
    const circleMatch =
      circleFilterValue.value.id === "_all" ||
      item.circle_id === circleFilterValue.value.id;

    return sessionMatch && generationMatch && circleMatch;
  });
});
</script>

<template>
  <div>
    <div class="flex flex-col space-x-2 lg:flex-row">
      <ItDropdownSelect
        v-model="sessionFilterValue"
        class="min-w-[18rem]"
        :items="sessionFilter"
        borderless
      ></ItDropdownSelect>
      <ItDropdownSelect
        v-model="generationFilterValue"
        class="min-w-[18rem]"
        :items="generationFilter"
        borderless
      ></ItDropdownSelect>
      <ItDropdownSelect
        v-model="circleFilterValue"
        class="min-w-[18rem]"
        :items="circleFilter"
        borderless
      ></ItDropdownSelect>
    </div>
    <div v-for="item in filteredItems" :key="item._id" class="px-5">
      <div class="border-t border-gray-500 py-4">
        <slot :item="item"></slot>
      </div>
    </div>
  </div>
</template>
