<template>
  <nav v-if="result && result.totalPages > 1" class="mt-4">
    <ul class="pagination">
      <li class="page-item" :class="{ disabled: previousDisabled }">
        <span class="page-link" v-if="previousDisabled">Vorige</span>
        <button type="button" class="page-link" v-else v-on:click="goToPage(result.currentPage - 1)">Vorige</button>
      </li>

      <li class="page-item" :key="1" :class="{ active: result.currentPage === 1 }">
        <button type="button" class="page-link" v-on:click="goToPage(1)">1</button>
      </li>

      <li class="page-item ellipses" v-if="!secondPageIsClickable && this.result.totalPages > 3">
        <div>...</div>
      </li>

      <li
        class="page-item"
        v-for="pageNumber in visiblePageNumbers"
        :key="pageNumber"
        :class="{ active: result.currentPage === pageNumber }"
      >
        <button type="button" class="page-link" v-on:click="goToPage(pageNumber)">{{ pageNumber }}</button>
      </li>

      <li class="page-item ellipses" v-if="!penultimatePageIsClickable && this.result.totalPages > 3">
        <div>...</div>
      </li>

      <li class="page-item" :key="result.totalPages" :class="{ active: result.currentPage === result.totalPages }">
        <button type="button" class="page-link" v-on:click="goToPage(result.totalPages)">{{ result.totalPages }}</button>
      </li>

      <li class="page-item" :class="{ disabled: nextDisabled }">
        <span class="page-link" v-if="nextDisabled">Vorige</span>
        <button type="button" class="page-link" v-on:click="goToPage(result.currentPage + 1)" v-else>Volgende</button>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.page-item.ellipses {
  padding: 0 5px;
}
</style>

<script>
import range from 'lodash/range';
export default {
  name: 'pagination',
  props: {
    module: String
  },
  computed: {
    visiblePageNumbers() {
      if (!this.result) {
        return null;
      }

      const first = Math.max(this.result.currentPage - 1, 2); // we always show the first one
      const last = Math.min(this.result.currentPage + 1, this.result.totalPages - 1); // we always show the last one

      // the last number will not be included
      return range(first, last + 1);
    },
    secondPageIsClickable() {
      return this.visiblePageNumbers.includes(2);
    },
    penultimatePageIsClickable() {
      return this.visiblePageNumbers.includes(this.result.totalPages - 1);
    },
    result() {
      return this.$store.getters[`${this.module}/result`]();
    },
    nextDisabled() {
      return this.$store.getters[`${this.module}/nextDisabled`]();
    },
    previousDisabled() {
      return this.$store.getters[`${this.module}/previousDisabled`]();
    },
    searchState() {
      return this.$store.getters[`${this.module}/searchState`]();
    }
  },
  methods: {
    goToPage(pageNumber) {
      this.$store.dispatch(`${this.module}/updateSearchState`, Object.assign(this.searchState, { page: pageNumber }));
    }
  }
};
</script>
