<template>
  <div class="blog">
    <header class="blog__header">
      <h1><a href="/blog">Blog</a></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">
              <a :href="'/tags/' + tag.name">{{ tag.name }}</a>
            </li>
          </ul>
        </BlogSidebar>

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

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

<script setup lang="ts">
const { data: tags } = await useFetch('/api/blog/tags');
const { data: archive } = await useFetch('/api/blog/archive');

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),
    100
  )
);

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: any): string => {
  return convertRange(tag.count, [minTag.value, maxTag.value], [10, 20]) + 'px';
};
</script>
