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

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

log.debug("MLMediaListPage created", props.courseSlug);

const mediaStore = useMediaLibraryStore();

const mediaCategory = computed(() => {
  return mediaStore.mediaLibraryPage?.children.find((category) =>
    category.slug.endsWith(props.mediaCategorySlug)
  );
});

const mediaList = computed(() => {
  if (mediaCategory.value) {
    const learnMediaCollection = mediaCategory.value.body.find((contentCollection) => {
      if (contentCollection.value.contents.length) {
        return contentCollection.value.contents[0].type === "learn_media";
      }
    });
    return learnMediaCollection?.value;
  }
  return undefined;
});
</script>

<template>
  <div
    v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList"
    class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
  >
    <div class="bg-gray-200">
      <div class="container-large">
        <nav class="py-4 lg:pb-8">
          <a class="btn-text inline-flex items-center pl-0" @click="$router.back()">
            <it-icon-arrow-left />
            <span>{{ $t("general.back") }}</span>
          </a>
        </nav>
        <h1 class="mb-4">
          {{ `${mediaCategory.title}: ${mediaList.title}` }}
        </h1>
      </div>
    </div>
    <div class="container-large">
      <section class="mb-20">
        <ul class="border-t">
          <li
            v-for="item in mediaList.contents"
            :key="item.id"
            class="flex items-center justify-between border-b py-4"
          >
            <div class="flex items-center justify-between">
              <div v-if="item.value.icon_url">
                <img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
              </div>
              <div>
                <h4 class="text-bold">{{ item.value.title }}</h4>
                <p v-if="item.value.description" class="mb-2">
                  {{ item.value.description }}
                </p>
              </div>
            </div>
            <div class="">
              <media-link
                :to="item.value.url"
                :blank="item.value.open_window"
                class="link"
              >
                {{ item.value.link_display_text }}
              </media-link>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<style scoped></style>
