<template>
  <button
    :aria-label="ariaLabel"
    :class="classes"
    @click="handleClick"
  ></button>
</template>

<script>
import { mapActions } from 'vuex'
import base from './c-base'
const props = {
  kind: {
    type: String,
    default: 'next'
  },
  sourceKind: {
    type: String,
    default: 'rows'
  }
}

export default {
  extends: base,
  props,
  data: function () {
    return {
      componentClass: 'c-btn-page-change'
    }
  },
  computed: {
    ariaLabel: function() {
      return this.kind
    },
    classes: function() {
      const result = [this.componentClass, this.buttonClass]

      if (this.kind === 'next' || this.kind === 'last')
        result.push({ 'c-inactive': this.btnPageNo >= this.btnPagesCount })
      if (this.kind === 'prev' || this.kind === 'first')
        result.push({ 'c-inactive': this.btnPageNo <= 1 })

      return result
    },
    buttonClass: function() {
      if(this.sourceKind === 'pivot-cols'){
        switch (this.kind) { 
          case 'next': return 'c-chevron-down';
          case 'prev': return 'c-chevron-up';
          case 'first': return 'c-chevrons-up';
          case 'last': return 'c-chevrons-down';
          default: return 'c-chevron-down';
        }
      }
      else{
        switch (this.kind) { 
          case 'next': return 'c-chevron-right';
          case 'prev': return 'c-chevron-left';
          case 'first': return 'c-chevrons-left';
          case 'last': return 'c-chevrons-right';
          default: return 'c-chevron-right';
        }
      }
    },
    btnPagesCount: 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;
      }
    },
    btnPageNo: 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;
      }
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetPageNoFirst',
      'setDataSetPivotColsPageNoFirst',
      'setDataSetPivotRowsPageNoFirst',
      'setDataSetPageNoLast',
      'setDataSetPivotColsPageNoLast',
      'setDataSetPivotRowsPageNoLast',
      'setDataSetPageNoPrev',
      'setDataSetPivotColsPageNoPrev',
      'setDataSetPivotRowsPageNoPrev',
      'setDataSetPageNoNext',
      'setDataSetPivotColsPageNoNext',
      'setDataSetPivotRowsPageNoNext'
    ]),
    handleClick: function() {
      if(({
        'next': this.setPageNoNext,
        'prev': this.setPageNoPrev,
        'fisrt': this.setPageNoFirst,
        'last': this.setPageNoLast
      })[this.kind]?.())
        this.$emit("onclick")
    },
    payloadPageOperation: function (pageNo) {
      return {
        appWindowIdent: this.appWindowIdent,
        dataSet: this.dataSet,
        pageNo: pageNo
      }
    },
    setPageNoFirst: function() {
      if(this.btnPageNo <= 1 ) return
      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;
      }
      return true
    },
    setPageNoLast: function() {
      if(this.btnPageNo >= this.btnPagesCount ) return
      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;
      }
      return true
    },
    setPageNoPrev: function() {
      if(this.btnPageNo <= 1 ) return
      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;
      }
      return true
    },
    setPageNoNext: function() {
      if(this.btnPageNo >= this.btnPagesCount ) return
      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;
      }
      return true
    }
  }
}</script>
