<script setup lang="ts">
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { computed, ref, watch } from "vue";

log.debug("HandlungsfelderOverview created");

const mediaStore = useMediaLibraryStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);

const categories = computed(() => {
  if (mediaStore.mediaLibraryPage) {
    return mediaStore.mediaLibraryPage.children.filter(
      (cat) => cat.course_category.general === false
    );
  }
  return [];
});

watch(dropdownSelected, (newValue) =>
  mediaStore.$patch({
    selectedLearningPath: newValue,
  })
);
</script>

<template>
  <div class="container-large">
    <div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
      <h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1>
      <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
    </div>
    <div v-if="mediaStore.mediaLibraryPage">
      <ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
        <li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
          <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
            <img
              class="m-auto"
              :src="`/static/icons/handlungsfelder/${cat.overview_icon}.svg`"
              alt=""
            />
            <h3 class="text-center text-base">{{ cat.title }}</h3>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>
