<template>
  <nav class="book-topics">
    <router-link
      :to="{name: 'topic', params: {topicSlug: topic.slug}}"
      :class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
      :key="topic.id"
      tag="div"
      active-class="book-subnavigation__item--active"
      class="book-topics__topic book-subnavigation__item"
      v-for="topic in topics"
      @click.native="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, networkStatus}) {
          if (!loading) {
            this.topics = this.$getRidOfEdges(data).topics;
          }
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .book-topics {
    &__topic {
    }
  }
</style>
