<template>
  <div class="post-list">
    <Author />
    <section v-show="posts.length" class="group" v-for="{ year, posts } of data" :key="year">
      <h3 class="group-title">{{ year }}</h3>
      <PostItem :post="post" :key="index" v-for="(post, index) of posts" />
    </section>
  </div>
</template>

<script>
import PostItem from '@theme/components/PostItem.vue';
import Author from '@theme/components/Author.vue';

export default {
  name: 'PostList',
  components: {
    Author,
    PostItem,
  },
  computed: {
    data() {
      const map = this.$pagination._matchedPages.reduce((acc, post) => {
        acc[post.key] = true;
        return acc;
      }, {});

      const data = this.$archive.map(item => {
        return {
          year: item.year,
          posts: item.posts.filter(post => map[post.key]),
        };
      });

      return data;
    },
    title() {
      if (this.$currentCategory) {
        return `Category: ${this.$currentCategory.key}`;
      }

      if (this.$currentTag) {
        return `Tag: ${this.$currentTag.key}`;
      }

      return '';
    },
  },
};
</script>

<style scoped lang="stylus">
@import '~@theme/styles/_mixins.styl';

.group {
  margin-bottom: space(3);

  .group-title {
    font('xxxl');
    color: var(--fg-color-1);
    margin-bottom: space();
  }
}
</style>
