<template>
  <div class="blog">
    <Head>
      <Meta property="og:type" content="website" />
      <Meta property="og:title" content="Evert's Blog" />
      <Meta property="og:url" content="https://lunasqu.ee/blog/index.html" />
      <Meta property="og:site_name" content="Evert's Blog" />
      <Meta property="og:locale" content="en_US" />
      <Meta property="article:author" content="Evert Prants" />
      <Meta name="twitter:card" content="summary" />
      <Link
        rel="alternate"
        href="/blog/atom.xml"
        title="Evert's Blog"
        type="application/atom+xml"
      />
      <Title>Evert's Blog | lunasqu.ee</Title>
    </Head>
    <header class="blog__header">
      <nav class="blog__nav">
        <ul>
          <li>
            <NuxtLink to="/"><span class="icon-home"></span>Home</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/blog/archive"
              ><span class="icon-archive"></span>Archive</NuxtLink
            >
          </li>
          <li class="blog__nav-margin">
            <a href="/blog/atom.xml" target="_blank"
              ><span class="icon-rss"></span>Atom</a
            >
          </li>
        </ul>
      </nav>
      <h1><NuxtLink to="/blog">Evert's Blog</NuxtLink></h1>
    </header>

    <section class="blog__content">
      <div class="blog__main-col">
        <slot></slot>
      </div>

      <div class="blog__sidebar">
        <BlogSidebar title="Tags">
          <ul>
            <li v-for="tag of tags">
              <NuxtLink :to="'/blog/tags/' + tag.name">{{ tag.name }}</NuxtLink>
            </li>
          </ul>
        </BlogSidebar>

        <BlogSidebar title="Tag cloud">
          <div class="tag-cloud">
            <NuxtLink
              v-for="tag of tags"
              :to="'/blog/tags/' + tag.name"
              :style="{ fontSize: getFontSize(tag) }"
              >{{ tag.name }}</NuxtLink
            >
          </div>
        </BlogSidebar>

        <BlogSidebar title="Archive">
          <ul>
            <li v-for="archive of monthList">
              <NuxtLink :href="archive.href">{{ archive.name }}</NuxtLink>
            </li>
          </ul>
        </BlogSidebar>

        <BlogSidebar title="Recent posts">
          <ul>
            <li v-for="recent of recents">
              <NuxtLink :href="'/blog/' + recent.fullSlug">{{
                recent.title
              }}</NuxtLink>
            </li>
          </ul>
        </BlogSidebar>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { BlogPostTag } from '~~/lib/types/post';

const { data: tags } = await useFetch('/api/blog/tags');
const { data: archive } = await useFetch('/api/blog/archive');
const { data: recents } = await useFetch('/api/blog', {
  key: 'recents',
  params: { limit: 6, render: false },
});

const monthNames = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

const monthList = computed(() => {
  let links = [];
  const res = archive.value;

  for (const year of Object.keys(res).sort((a, b) => Number(b) - Number(a))) {
    for (const month of Object.keys(res[year]).sort(
      (a, b) => Number(b) - Number(a)
    )) {
      const monthName = monthNames[new Date(`${year}-${month}-01`).getMonth()];

      links.push({
        name: `${monthName} ${year}`,
        href: `/blog/archive/${year}/${month}`,
      });
    }
  }

  return links;
});

const minTag = computed(() =>
  tags.value.reduce<number>(
    (min, current) => (min > current.count ? current.count : min),
    1000
  )
);

const maxTag = computed(() =>
  tags.value.reduce<number>(
    (max, current) => (max < current.count ? current.count : max),
    0
  )
);

function convertRange(value: number, r1: number[], r2: number[]) {
  return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
}

const getFontSize = (tag: BlogPostTag): string => {
  return convertRange(tag.count, [minTag.value, maxTag.value], [10, 20]) + 'px';
};
</script>
