<template lang="html">

  <div class="">

    <nav class="pagination">
      <a class="button" @click="setPage(currentPage - 1)" :disabled="defPrevButton()"><i class="fa fa-arrow-circle-o-left"></i> Voltar</a>
      <a class="button" @click="setPage(currentPage + 1)" :disabled="defNextButton()"><i class="fa fa-arrow-circle-o-right"></i> Avançar</a>
      <ul>
        <li v-show="defFirstAndLastPageButtons()">
          <a :disabled="isCurrentPageInLoop(currentPage, 1)" :class="setCSSActiveButton(currentPage, 1)" @click="setPage(1)">1</a>
        </li>
        <li v-show="defFirstAndLastPageButtons()">
          <span>...</span>
        </li>
        <li v-for="pag in pages">
          <a :disabled="isCurrentPageInLoop(currentPage, pag)" :class="setCSSActiveButton(currentPage, pag)" @click="setPage(pag)">{{ pag }}</a>
        </li>
        <li v-show="defFirstAndLastPageButtons()">
          <span>...</span>
        </li>
        <li v-show="defFirstAndLastPageButtons()">
          <a :disabled="isCurrentPageInLoop(currentPage, lastPageNumber)" :class="setCSSActiveButton(currentPage, lastPageNumber)" @click="setPage(lastPageNumber)">{{ lastPageNumber }}</a>
        </li>
      </ul>
    </nav>
  </div>

</template>

<script>
import _ from 'lodash'

const CENTRAL_PAGE_BUTTONS = 5 // informar um inteiro impar
const TOTAL_PAGE_BUTTONS = CENTRAL_PAGE_BUTTONS + 2 // nao alterar essa constante

export default {
  data () {
    return {
    }
  },
  computed: {
    pages () {
      const totalPages = _.toInteger(this.total / this.pageLimite) + 1
      console.log('total, pagelimite, totalPages', this.total, this.pageLimite, totalPages)
      let _array = []

      if (totalPages <= TOTAL_PAGE_BUTTONS) {
        _array = _.range(1, totalPages + 1)
      } else if (this.currentPage <= CENTRAL_PAGE_BUTTONS) {
        _array = _.range(2, CENTRAL_PAGE_BUTTONS + 2)
      } else if ((this.currentPage + (_.toInteger(CENTRAL_PAGE_BUTTONS / 2))) >= totalPages) {
        _array = _.range(totalPages - CENTRAL_PAGE_BUTTONS, totalPages)
      } else {
        _array = _.range(this.currentPage - 2, this.currentPage + (CENTRAL_PAGE_BUTTONS - 2))
      }
      return _array
    },
    lastPageNumber () {
      return _.toInteger(this.total / this.pageLimite) + 1
    }
  },
  ready () {
  },
  methods: {
    setCSSActiveButton (currentPage, pag) {
      console.log('currentPage, pag (loop)', currentPage, pag)
      if (this.isCurrentPageInLoop(currentPage, pag)) {
        return 'button is-primary'
      }
      return 'button'
    },
    isCurrentPageInLoop (currentPage, pag) {
      if (currentPage === pag) {
        return true
      }
      return false
    },
    setPage (pag) {
      this.$emit('set-current-page', pag)
    },
    defPrevButton () {
      return this.currentPage < 2
    },
    defNextButton () {
      return (this.currentPage * this.pageLimite) > this.total
    },
    defFirstAndLastPageButtons () {
      return ((this.total / this.pageLimite) >= TOTAL_PAGE_BUTTONS)
    }
  },
  props: [ 'total', 'currentPage', 'pageLimite' ],
  components: {}
}
</script>

<style lang="css">
</style>