<script setup>
import PostComponent from '@/components/PostComponent.vue'
import { usePostsStore } from '@/stores/posts.js'
import { onMounted, ref } from 'vue'
import WelcomeComponent from '@/components/WelcomeComponent.vue'

const postsStore = usePostsStore()

const fullpage = ref(null)
const fullpageOptions = ref({
  licenseKey: 'gplv3-license',
  menu: '#menu',
  scrollBar: true,
  normalScrollElements: '.scrollable-element',
  scrollOverflow: false,
  onLeave: onLeave,
  afterLoad: afterLoad,
  credits: { enabled: false }
})
const menu = ref(null)
let fullPageInit = false;

onMounted(() => {
  postsStore.fetchPosts().then(() => {
    if (!fullPageInit) {
      fullpage.value.init();
      fullPageInit = true;
    } else {
      fullpage.value.build();
    }
  });
})

function onLeave(origin, destination, direction, trigger) {
  if (destination.anchor === 'welcome-section') {
    menu.value.classList.add('opacity-0')
  } else {
    menu.value.classList.remove('opacity-0')
  }
}

function afterLoad(origin, destination, direction, trigger) {
  if (destination.anchor === 'welcome-section') {
    menu.value.classList.add('opacity-0')
  }
}
</script>

<template>
  <div
    id="menu-grid"
    class="fixed z-50 h-full w-full grid grid-cols-5 grid-rows-3 place-items-stretch pointer-events-none"
  >
    <ul
      id="menu"
      class="scrollable-element col-start-1 col-span-full row-start-1 row-span-1 mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll transition-opacity duration-1000 opacity-0"
      ref="menu"
    >
      <li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id" class="m-2 backdrop-blur-sm rounded-lg bg-black/10 hover:bg-gray-500/10 transition-colors duration-200">
        <a :href="'#post-' + post.id" class="block text-right px-4 py-3 transition-all duration-300">{{ post.formatedDate }}</a>
      </li>
    </ul>
  </div>
  <full-page
    id="fullpage"
    ref="fullpage"
    :options="fullpageOptions"
    @on-leave="onLeave"
    @after-load="afterLoad"
    :skip-init="true"
  >
    <WelcomeComponent />
    <PostComponent class="section" v-for="post in postsStore.posts" :key="post.id" :post="post" />
  </full-page>
</template>

<style scoped>

#menu li.active,
#menu li.active:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#menu li.active a,
#menu li.active:hover a:hover {
  font-weight: bold;
}
</style>
