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

log.debug("MediaLibraryView created");

const props = defineProps<{
  courseSlug: string;
}>();

const mediaLibraryStore = useMediaLibraryStore();

onMounted(async () => {
  log.debug("MediaLibraryParentPage mounted", props.courseSlug);

  try {
    await mediaLibraryStore.loadMediaLibraryPage(`${props.courseSlug}-media`);
  } catch (error) {
    log.error(error);
  }
});
</script>

<template>
  <div class="bg-gray-200">
    <nav class="border-b bg-white px-6 py-4">
      <ul
        v-if="mediaLibraryStore.mediaLibraryPage"
        class="scrollbar overflow-auto whitespace-nowrap"
      >
        <li class="inline-block">
          <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">
            {{ $t("a.Übersicht") }}
          </router-link>
        </li>
        <li
          v-for="category in mediaLibraryStore.mediaLibraryPage.children"
          :key="category.id"
          class="ml-6 inline-block lg:ml-12"
        >
          <router-link
            v-if="category.content_type === 'media_library.MediaLibraryCategoryPage'"
            :to="category.frontend_url"
          >
            {{ category.title }}
          </router-link>

          <a v-else :href="category.content_url" target="_blank">
            {{ category.title }}
          </a>
        </li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped>
.scrollbar::-webkit-scrollbar {
  display: none;
}
</style>
