<template>
  <nav class="topic-navigation">
    <router-link
      :to="{name: 'topic', params: {topicSlug: topic.slug}}"
      :class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
      tag="div"
      active-class="book-subnavigation__item--active"
      class="topic-navigation__topic book-subnavigation__item"
      v-for="topic in topics"
      :key="topic.id"
      @click="closeSidebar('navigation')"
    >
      {{ topic.order }}.
      {{ topic.title }}
    </router-link>
  </nav>
</template>

<script>
  import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
  import sidebarMixin from '@/mixins/sidebar';

  export default {
    props: {
      mobile: {
        default: false,
      },
    },

    mixins: [sidebarMixin],

    data() {
      return {
        topics: [],
      };
    },

    methods: {
      topicId(id) {
        return atob(id);
      },
    },

    apollo: {
      topics: {
        query: ALL_TOPICS_QUERY,
        manual: true,
        result({data, loading}) {
          if (!loading) {
            this.topics = this.$getRidOfEdges(data).topics;
          }
        },
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .topic-navigation {
    &__topic {
    }
  }
</style>
