<template>
  <section id="blog" class="BlogOverview content">
    <h1>Blogfussel - für mehr Fussel im Blog</h1>
    <p>Hey! Hier sammel ich alles, was mir so durch den Kopf geht - von handfesten Tutorials und Code-Snippets über Freelancing-Stories
      bis hin zu News meiner Apps und random Gedanken. Manchmal ausführlich, manchmal nur kurz angerissen.</p>

    <main class="margin-top">
      <ul class="category-list">
        <li>
          <NuxtLink class="inline-flex-row gap-sm side" to="/blog">
            <span class="chip"
                  :class="{ 'dark' : route.query.category && Object.keys(allCategoriesAndCount).includes(route.query.category as string)}">Alle {{
                articles?.length
              }}</span>
          </NuxtLink>
        </li>
        <li v-for="(count, category) in allCategoriesAndCount">
          <NuxtLink class="inline-flex-row gap-sm side" :to="`?category=${category}`">
            <span class="chip" :class="{ 'dark' : category !== route.query.category}"><BlogCategory :name="category"/> {{ count }}</span>
          </NuxtLink>
        </li>
      </ul>
      <div class="grid margin-top-middle article-overview">
        <BlogCard v-for="article in firstTen" v-bind="makeBlogCard(article)"/>
        <div v-if="firstTen.length < 2"/>
        <div v-if="firstTen.length < 3"/>
      </div>
    </main>
  </section>
</template>

<script setup lang="ts">
import type { BlogCollectionItem } from '@nuxt/content'
import type { Category } from '../../components/Blog/types'

const route = useRoute()

const { data: articles } = await useAsyncData('articles', () => queryCollection('blog')
  .where('date', '<', tomorrow(new Date()))
  .order('date', 'DESC')
  .all(),
)

const firstTen = computed(() => {
  if (route.query.category && Object.keys(allCategoriesAndCount.value).includes(route.query.category as Category)) {
    return articles.value?.filter(article => article.category === route.query.category).slice(0, 10) ?? []
  }
  return articles.value?.slice(0, 10) ?? []
})

const allCategoriesAndCount = computed(() => {
  const categories = {} as Record<Category, number>
  articles.value?.forEach(article => {
    const category = article.category as Category
    if (category) {
      categories[category] = (categories[category] ?? 0) + 1
    }
  })
  return categories
})

const makeBlogCard = (article: BlogCollectionItem) => ({
  title: article.title,
  description: article.description,
  image: article.thumbnail as string,
  date: article.date as string,
  link: article.path,
  category: article.category as Category,
  author: article.author as { name: string, image: string },
})

useHead({
  link: [
    { rel: 'alternate', type: 'application/rss+xml', href: '/blog/rss.xml', title: 'blogfussel' },
  ],
})
</script>