<template>
  <div class="text-center">
    <v-btn text x-small :disabled="isFirstPage" @click="changePage('previous')">
      <v-icon x-small>icon-arrow-left</v-icon>
    </v-btn>

    <small class="mx-2">
      {{ `${page} / ${totalPages}` }}
    </small>

    <v-btn text x-small :disabled="isLastPage" @click="changePage('next')">
      <v-icon x-small>icon-arrow-right</v-icon>
    </v-btn>

    <!-- Debugging -->
    <!-- <ul>
      <li v-for="(column, i) in subset" :key="`column-dyn${i}`">
        {{ column }}
      </li>
    </ul> -->
  </div>
</template>

<script>
// Inspiration: https://github.com/byteboomers/vue-lpage
export default {
  computed: {
    page() {
      return this.$store.state.columnBrowser.page
    },
    isFirstPage() {
      return this.$store.getters['columnBrowser/isFirstPage']
    },
    isLastPage() {
      return this.$store.getters['columnBrowser/isLastPage']
    },
    totalPages() {
      return this.$store.getters['columnBrowser/totalPages']
    },
    subset() {
      return this.$store.getters['columnBrowser/subset']
    },
  },
  methods: {
    changePage(direction) {
      this.$store.dispatch('columnBrowser/changePage', direction)
    },
  },
}
</script>
