<script setup lang="ts">

import { sortMetaData, toMetaDataType } from '~/types/PostMetaData';
import type { PostMetaData } from '~/types/PostMetaData';
import SimpleCard from '~/pages/index/components/SimpleCard.vue';
import ArticleCard from '~/pages/index/components/ArticleCard.vue';

const { data: srcPostsMetaData } = useAsyncData(async () => sortMetaData((await queryCollection('content').all()).map((x) => toMetaDataType(x)), 'published_at', true));
const postsMetaData = ref<PostMetaData[]>([]);
function toArticlePage(article: PostMetaData) {
  navigateTo(`/article/${encodeURIComponent(article.id)}`);
}
watch(srcPostsMetaData, () => {
  postsMetaData.value = srcPostsMetaData.value || [];
});

//
// async function loadMetaData() {
//
// }
function filterRuleChange(rule: string) {
  if (rule === '')
    postsMetaData.value = srcPostsMetaData.value || [];
  else
    postsMetaData.value = (srcPostsMetaData.value || []).filter((post) => post.type === rule);
}
</script>

<template>
  <div>
    <div class="table w-full mt-6 table-fixed">
      <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
        <div class="relative duration-500 transition-all xl:w-80 w-0 overflow-hidden">
          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
            <PersonalCard
                v-if="postsMetaData" :posts-meta-data="postsMetaData!"
                @filter-rule-change="filterRuleChange"/>
          </div>
        </div>
      </div>
      <div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
        <!--        <ArticleCard class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600"/>-->
        <div
            v-for="post in postsMetaData" :key="post.id"
            class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
          <ArticleCard
              v-if="!post.draft && post.type === 'article'"
              class="w-full"
              :meta-data="post"
              @click="toArticlePage(post)"/>
          <SimpleCard
              v-else-if="!post.draft && (post.type === 'rambling' || post.type === 'announcement')"
              :meta-data="post"/>
        </div>
      </div>
    </div>
  </div>
</template>
