<script setup lang="ts">
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { computed } from "vue";
import type { MediaLibraryCategoryPage, MediaLibraryContentPage } from "@/types";
import RichText from "@/components/ui/RichText.vue";

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

log.debug("MediaLibraryContentPage created", props);

const mediaStore = useMediaLibraryStore();

const parentCategory = computed(() => {
  return mediaStore.mediaLibraryPage?.children.find((c) =>
    c.frontend_url.endsWith(props.categorySlug)
  ) as MediaLibraryCategoryPage | undefined;
});

const mediaCategory = computed(() => {
  return parentCategory.value?.children.find((c) =>
    c.frontend_url.endsWith(props.contentSlug)
  ) as MediaLibraryContentPage | undefined;
});
</script>

<template>
  <div
    v-if="mediaStore.mediaLibraryPage && mediaCategory"
    class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
  >
    <div class="bg-gray-200 pb-4 lg:pb-12">
      <div class="container-large">
        <nav class="py-4 lg:pb-8">
          <router-link
            class="btn-text inline-flex items-center pl-0"
            :to="
              parentCategory?.frontend_url || mediaStore.mediaLibraryPage.frontend_url
            "
          >
            <it-icon-arrow-left />
            <span>{{ $t("general.back") }}</span>
          </router-link>
        </nav>
        <div class="flex justify-between md:flex-col lg:flex-row">
          <div class="lg:w-6/12">
            <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
            <RichText
              class="text-large"
              :content="mediaCategory.description"
              open-links-in-new-tab
            ></RichText>
          </div>
          <div>
            <img
              class="float-left hidden md:mt-8 md:block lg:float-right lg:mt-0 lg:h-full lg:w-[505px]"
              :src="mediaCategory.icon_detail_url"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="container-large">
      <RichText
        class="mb-20 mt-8 lg:w-2/3"
        :content="mediaCategory.body"
        open-links-in-new-tab
      />
    </div>
  </div>
</template>

<style scoped></style>
