<template>
  <ul v-bind:class="[componentClass]">
    <li v-if='isDeterminate' class='c-rowsCnt'>{{formatValue(pagerRowsCount, 'numeric')}}</li>
    <li v-if='isDeterminate' class='c-rowsCntLab'>{{labelCount}}</li>
    <li class='c-btn first' v-if="showFirstPageButton" v-bind:class="{'hidden':(pagerPageNo <= 1 )}" v-on:click="setPageNoFirst"></li>
    <li class='c-btn prev' v-if="showPreviousPageButton && isPhone" v-bind:class="{'hidden':(pagerPageNo <= 1 )}" v-on:click="setPageNoPrev"></li>
    <li class='c-btn prev' v-if="showPreviousPageButton && (isTablet || isDesktop)" v-bind:class="{'hidden':(pagerPageNo <= 1 )}" v-on:click="setPageNoPrev">{{previousPageButtonLabel}}</li>
    <li v-if='isDeterminate'>
      <input class='c-pageNo' type="number" :value="pagerPageNo" v-on:change="onPageChange"/>
    </li>
    <template v-if='!isDeterminate'>
      <li v-if="showFirstPage && pagerPageNo >= buttonsCount"
        :class="{'c-firstPage':true,'paged':!isDeterminate}"
        @click="setPageNoFirst"
      >1
      </li>
      <li class='c-btn' v-bind:class="{'hidden':(pagerPageNo < buttonsCount )}" v-on:click="setPageNoPrev">...</li>
      <li v-for="i in buttons" :key="i" v-bind:class="{'paged':true,'active':(pagerPageNo == i)}" v-on:click="setPageNo(i)">
        {{i}}
      </li>
      <li class='c-btn' v-bind:class="{'hidden':(pagerPageNo >= pagerPagesCount - Math.floor(buttonsCount / 2) + (1 - buttonsCount % 2) || pagerPagesCount <= buttonsCount)}" v-on:click="setPageNoNext">...</li>
    </template>
    <li v-if='isDeterminate' class='c-sep'>{{labelSep}}</li>
    <li v-if='isDeterminate || (showPagesCnt && pagerPageNo < pagerPagesCount - Math.floor(buttonsCount / 2) + (1 - buttonsCount % 2) && pagerPagesCount > buttonsCount)' 
      :class="{'c-pagesCnt':true,'paged':!isDeterminate}"
      @click="setPageNoLast"
    >{{pagerPagesCount}}
    </li>
    <li class='c-btn next' v-if="showNextPageButton && isPhone" v-bind:class="{'hidden':(pagerPageNo >= pagerPagesCount )}" v-on:click="setPageNoNext"></li>
    <li class='c-btn next' v-if="showNextPageButton && (isTablet || isDesktop)" v-bind:class="{'hidden':(pagerPageNo >= pagerPagesCount )}" v-on:click="setPageNoNext">{{nextPageButtonLabel}}</li>
    <li class='c-btn last' v-if="showLastPageButton" v-bind:class="{'hidden':(pagerPageNo >= pagerPagesCount )}" v-on:click="setPageNoLast"></li>
  </ul>
</template>

<script>
import { mapActions } from 'vuex'
import base from './c-base'
const props = {
  kind: {
    type: String,
    default: null
  },
  btnsCnt: {
    type: Number,
    default: 3
  },
  sourceKind: {
    type: String,
    default: 'rows'
  },
  labelCount: {
    type: String,
    default: 'rekordów'
  },
  showFirstPageButton: {
    type: Boolean,
    default: true
  },
  showLastPageButton: {
    type: Boolean,
    default: true
  },
  showPreviousPageButton: {
    type: Boolean,
    default: true
  },
  showNextPageButton: {
    type: Boolean,
    default: true
  },
  previousPageButtonLabel: {
    type: String
  },
  nextPageButtonLabel: {
    type: String
  },
  showPagesCnt: {
    type: Boolean,
    default: false
  },
  showFirstPage: {
    type: Boolean,
    default: false
  },
  scrollTopOnPageChange: {
    type: Boolean,
    default: true
  }
}

export default {
  extends: base,
  props,
  data: function () {
    return {
      labelSep: 'z',
      componentClass: 'c-pager',
      buttonsCount: Math.floor(this.btnsCnt),
      isDeterminate: this.kind == 'determinate'
    }
  },
  computed: {
    pagerRowsCount: function() {
      switch (this.sourceKind) { 
        case 'rows': return this.rowsCount;
        case 'pivot-rows': return this.pivotRowsCount;
        case 'pivot-cols': return this.pivotColsCount;
        default: return this.rowsCount;
      }
    },
    pagerPagesCount: function() {
      switch (this.sourceKind) { 
        case 'rows': return this.pagesCount;
        case 'pivot-rows': return this.pivotRowsPagesCount; 
        case 'pivot-cols': return this.pivotColsPagesCount;
        default: return this.pagesCount;
      }
    },
    pagerPageNo: function() {
      switch (this.sourceKind) { 
        case 'rows': return this.pageNo;
        case 'pivot-rows': return this.pivotRowsPageNo;
        case 'pivot-cols': return this.pivotColsPageNo;
        default: return this.pageNo;
      }
    },
    buttons: function() {
      let result = []
      let b = this.buttonsCount  > this.pagerPagesCount ? this.pagerPagesCount : this.buttonsCount;
      
      if (this.pagerPageNo < b) {
        for (let i = 1; i <= b; i++) {
          result.push(i)
        }
      } else {
        let start = this.pagerPageNo - Math.floor(b / 2)
        for (let i = start; i <= b + start - 1; i++) {
          if (i > this.pagerPagesCount) {
            break
          }
          result.push(i)
        }
      }
      return result
    },
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetPageNo',
      'setDataSetPivotColsPageNo',
      'setDataSetPivotRowsPageNo',
      'setDataSetPageNoFirst',
      'setDataSetPivotColsPageNoFirst',
      'setDataSetPivotRowsPageNoFirst',
      'setDataSetPageNoLast',
      'setDataSetPivotColsPageNoLast',
      'setDataSetPivotRowsPageNoLast',
      'setDataSetPageNoPrev',
      'setDataSetPivotColsPageNoPrev',
      'setDataSetPivotRowsPageNoPrev',
      'setDataSetPageNoNext',
      'setDataSetPivotColsPageNoNext',
      'setDataSetPivotRowsPageNoNext'
    ]),
    payloadPageOperation: function (pageNo) {
      return {
        appWindowIdent: this.appWindowIdent,
        dataSet: this.dataSet,
        pageNo: pageNo
      }
    },
    setPageNo: function(pageNo) {
      let payload = this.payloadPageOperation(pageNo)
      switch (this.sourceKind) { 
        case 'rows': this.setDataSetPageNo(payload); break;
        case 'pivot-rows': this.setDataSetPivotRowsPageNo(payload); break;
        case 'pivot-cols': this.setDataSetPivotColsPageNo(payload); break;
        default: this.setDataSetPageNo(payload); break;
      }
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    },
    setPageNoFirst: function() {
      let payload = this.payloadPageOperation()
      switch (this.sourceKind) { 
        case 'rows': this.setDataSetPageNoFirst(payload); break;
        case 'pivot-rows': this.setDataSetPivotRowsPageNoFirst(payload); break;
        case 'pivot-cols': this.setDataSetPivotColsPageNoFirst(payload); break;
        default: this.setDataSetPageNoFirst(payload); break;
      }
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    },
    setPageNoLast: function() {
      let payload = this.payloadPageOperation()
      switch (this.sourceKind) { 
        case 'rows': this.setDataSetPageNoLast(payload); break;
        case 'pivot-rows': this.setDataSetPivotRowsPageNoLast(payload); break;
        case 'pivot-cols': this.setDataSetPivotColsPageNoLast(payload); break;
        default: this.setDataSetPageNoLast(payload); break;
      }
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    },
    setPageNoPrev: function() {
      let payload = this.payloadPageOperation()
      switch (this.sourceKind) { 
        case 'rows': this.setDataSetPageNoPrev(payload); break;
        case 'pivot-rows': this.setDataSetPivotRowsPageNoPrev(payload); break;
        case 'pivot-cols': this.setDataSetPivotColsPageNoPrev(payload); break;
        default: this.setDataSetPageNoPrev(payload); break;
      }
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    },
    setPageNoNext: function() {
      let payload = this.payloadPageOperation()
      switch (this.sourceKind) { 
        case 'rows': this.setDataSetPageNoNext(payload); break;
        case 'pivot-rows': this.setDataSetPivotRowsPageNoNext(payload); break;
        case 'pivot-cols': this.setDataSetPivotColsPageNoNext(payload); break;
        default: this.setDataSetPageNoNext(payload); break;
      }
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    },
    onPageChange: function(evt) {
      this.setPageNo(evt.target.valueAsNumber)
      if(this.scrollTopOnPageChange) {
        window.scrollTo(0, 0)
      }
    }
  },
}</script>
