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

log.debug("MediaMainView created");

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

const generalCategory = computed(() => {
  if (mediaStore.mediaLibraryPage) {
    return mediaStore.mediaLibraryPage.children.find(
      (cat) => cat.course_category.general
    );
  }
  return undefined;
});

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

<template>
  <div class="container-large">
    <div class="mb-12 mt-6 flex flex-col justify-between lg:flex-row">
      <h1>{{ $t("mediaLibrary.title") }}</h1>
      <!--      <ItDropdownSelect-->
      <!--        v-model="dropdownSelected"-->
      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
    </div>
    <OverviewCard
      v-if="mediaStore.mediaLibraryPage"
      :title="$t('mediaLibrary.handlungsfelder.title', 2)"
      :call2-action="$t('general.show')"
      :link="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
      :description="$t('mediaLibrary.handlungsfelder.description')"
      icon="handlungsfelder-overview"
      class="mb-6"
    ></OverviewCard>
    <OverviewCard
      v-if="mediaStore.mediaLibraryPage && generalCategory"
      :title="$t('mediaLibrary.learningMedia.titel')"
      :call2-action="$t('general.show')"
      :link="`${generalCategory.frontend_url}/media`"
      :description="$t('mediaLibrary.learningMedia.description')"
      icon="lernmedien-overview"
      class="mb-6"
    ></OverviewCard>
  </div>
</template>

<style scoped></style>
