<template>
  <div
    class="
      fixed
      top-0
      left-0
      w-auto
      h-full
      overflow-auto
      pointer-events-auto
      min-h-fill-available
      lg:h-screen lg:sticky lg:top-header lg:w-60
    "
  >
    <div class="w-auto h-full overflow-auto d-bg-header dark:lg:bg-transparent lg:bg-transparent">
      <!-- Aside Header -->
      <div class="flex items-center w-full px-4 sm:px-6 lg:hidden h-header d-aside-header-bg">
        <button
          class="
            flex-1
            transition-colors
            duration-200
            focus:outline-none
            lg:hidden
            d-secondary-text
            hover:d-secondary-text-hover
          "
          @click.stop="$menu.toggle"
        >
          <IconArrowLeft class="w-6 h-6" />
        </button>
        <div class="flex items-center justify-end w-full h-header lg:hidden space-x-3">
          <LangSwitcher />
          <ColorSwitcher size="w-6 h-6" padding="p-1" />
          <SocialIcons size="w-6 h-6" padding="p-1" class="space-x-3" />
        </div>
      </div>

      <!-- Aside Navigation -->
      <nav
        class="
          flex flex-col
          justify-between
          lg:justify-start
          max-w-sm
          overflow-y-auto
          text-sm
          font-medium
          lg:h-[reset]
          h-(full-header)
          d-scrollbar
        "
      >
        <div class="py-4 pl-4 pr-24 sm:pl-6 lg:pr-0 lg:pt-10">
          <!-- Aside top slot component -->
          <AsideTop />

          <!-- Back link -->
          <NuxtLink v-if="parent" class="mb-3 block" :to="$contentLocalePath(parent.to)">
            <IconArrowLeft width="16" height="16" class="inline-block mr-2" /> {{ parent.title }}
          </NuxtLink>

          <!-- Title -->
          <h5 v-if="!isDirectory && title" class="d-aside-title">
            {{ title }}
          </h5>

          <!-- Links list -->
          <ul>
            <template v-for="link in links">
              <AsideNavigationItem
                v-if="link.nested !== false && link.children.length"
                :key="link.to"
                :title="link.title"
                :docs="link.children"
                :collapse.sync="link.collapse"
              />
              <AsideNavigationItem v-else :key="link.to" :docs="[link]" />
            </template>
          </ul>

          <!-- Aside bottom slot component -->
          <AsideBottom />
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, ref, watch, useContext } from "@nuxtjs/composition-api";
export default defineComponent({
  setup() {
    const { $docus } = useContext();
    const links = ref($docus.currentNav.value.links);
    const title = ref($docus.currentNav.value.title);
    const slug = ref($docus.currentNav.value.slug);
    const isDirectory = computed(() => links.value.filter((link) => link.children && link.children.length > 0).length === 0);
    watch($docus.currentNav, (newVal) => {
      links.value = newVal.links;
      title.value = newVal.title;
      slug.value = newVal.slug;
    }, { deep: true });
    watch(links, (newVal) => {
      newVal.forEach((link) => {
        if (link.children && link.children.length > 0) {
          const isCategoryActive = link.children.some((document) => $docus.isLinkActive(document.to));
          if (isCategoryActive) {
            link.collapse = false;
          }
        }
      });
    }, { immediate: true });
    const parent = computed(() => $docus.currentNav.value.parent);
    const lastRelease = computed(() => $docus.lastRelease?.value);
    return { isDirectory, links, title, slug, parent, lastRelease };
  }
});
</script>
