<script setup lang="ts">
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import type {
  LearningContentDocumentList,
  MediaLibraryContentBlockValue,
} from "@/types";
import LearningContentSimpleLayout from "../layouts/LearningContentSimpleLayout.vue";
import { onMounted, ref } from "vue";
import log from "loglevel";
import { itGetCached } from "@/fetchHelpers";

const props = defineProps<{
  content: LearningContentDocumentList;
}>();

type BlockDocument = {
  id: string;
  value: MediaLibraryContentBlockValue;
};

const documents = ref<BlockDocument[]>([]);

onMounted(async () => {
  log.debug("DocumentListBlock mounted");
  const response = await itGetCached(`/api/course/page/${props.content.slug}/`);
  documents.value = response.documents;
});
</script>

<template>
  <LearningContentSimpleLayout :title="content.title" :learning-content="props.content">
    <div class="container-medium">
      <div class="lg:mt-8">
        <div class="my-4">
          <!-- eslint-disable vue/no-v-html -->
          <p v-if="content.description" v-html="content.description"></p>

          <div>
            <ul class="border-t">
              <li
                v-for="item in documents"
                :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="">
                  <MediaLink
                    :to="item.value.url"
                    :blank="item.value.open_window"
                    class="link"
                  >
                    {{ item.value.link_display_text }}
                  </MediaLink>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </LearningContentSimpleLayout>
</template>
