<script setup lang="ts">
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import type { MediaBlockType } from "@/types";
import * as log from "loglevel";
import { computed } from "vue";
import { useRoute } from "vue-router";

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

const route = useRoute();

log.debug("MediaCategoryDetailView created", props.mediaCategorySlug, route);

const mediaStore = useMediaLibraryStore();

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

const backLink = computed(() => {
  if (route.query.back) {
    return route.query.back;
  } else {
    return `${mediaStore.mediaLibraryPage?.frontend_url}/category`;
  }
});

const maxCardItems = 4;
const maxListItems = 6;

const displayAsCard = (itemType: MediaBlockType): boolean => {
  return itemType === "learn_media" || itemType === "relative_link";
};

function hasMoreItems<T>(items: T[], maxItems: number): boolean {
  return items.length > maxItems;
}

function getMaxDisplayItems<T>(items: T[], maxItems: number) {
  return items.slice(0, maxItems);
}

function getMaxDisplayItemsForType<T>(itemType: MediaBlockType, items: T[]) {
  return displayAsCard(itemType)
    ? getMaxDisplayItems(items, maxCardItems)
    : getMaxDisplayItems(items, maxListItems);
}

function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
  const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
  return hasMoreItems(items, maxItems);
}
</script>

<template>
  <div
    v-if="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="(backLink as string)"
          >
            <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">
            <h3 class="text-large mb-3 font-normal text-gray-900">
              {{ $t("mediaLibrary.handlungsfelder.title", 1) }}
            </h3>
            <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
            <p class="text-large">{{ mediaCategory.introduction_text }}</p>
          </div>
          <div>
            <img
              class="float-left hidden md:mt-8 md:block lg:float-right lg:mt-0 lg:max-w-[505px]"
              :src="`/static/icons/handlungsfelder/${mediaCategory.detail_image}.svg`"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="container-large">
      <section class="mb-20 mt-8 lg:w-2/3">
        <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
        <!-- as long as there is no real content Chrigi says p class="mb-4">{{ mediaCategory.description_text }}</p-->
        <ul>
          <li
            v-for="item in mediaCategory.items"
            :key="item.id"
            class="mb-2 flex items-center"
          >
            <it-icon-check class="mr-4 h-8 w-8 flex-none text-sky-500"></it-icon-check>
            {{ item.value }}
          </li>
        </ul>
      </section>

      <template
        v-for="content_collection in mediaCategory.body"
        :key="content_collection.value.title"
      >
        <section v-if="content_collection.value?.contents?.length" class="mb-20">
          <h2 class="mb-4">{{ content_collection.value.title }}</h2>
          <p class="mb-4 lg:w-2/3">
            {{ content_collection.value.description }}
          </p>
          <ul
            :class="{
              'grid grid-cols-1 gap-4 lg:grid-cols-2': displayAsCard(
                content_collection.value.contents[0].type
              ),
              'border-t': !displayAsCard(content_collection.value.contents[0].type),
              'mb-6': hasMoreItemsForType(
                content_collection.value.contents[0].type,
                content_collection.value.contents
              ),
            }"
          >
            <li
              v-for="mediaItem in getMaxDisplayItemsForType(
                content_collection.value.contents[0].type,
                content_collection.value.contents
              )"
              :key="mediaItem.id"
            >
              <LinkCard
                v-if="displayAsCard(mediaItem.type)"
                :title="mediaItem.value.title"
                :icon="mediaItem.value.icon_url"
                :description="mediaItem.value.description"
                :url="mediaItem.value.url"
                :link-text="mediaItem.value.link_display_text"
                :open-window="mediaItem.value.open_window"
              />
              <div
                v-else
                class="flex flex-col justify-between border-b py-4 lg:flex-row lg:items-center"
              >
                <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
                <MediaLink
                  :blank="mediaItem.value.open_window"
                  :to="mediaItem.value.url"
                  class="link"
                >
                  {{ mediaItem.value.link_display_text }}
                </MediaLink>
              </div>
            </li>
          </ul>
          <router-link
            v-if="
              hasMoreItemsForType(
                content_collection.value.contents[0].type,
                content_collection.value.contents
              )
            "
            :to="`${mediaCategory.frontend_url}/media`"
            class="btn-text inline-flex items-center py-2 pl-0"
          >
            <span>Alle anschauen</span>
            <it-icon-arrow-right></it-icon-arrow-right>
          </router-link>
        </section>
      </template>
    </div>
  </div>
</template>

<style scoped></style>
