<template lang="pug">
  .field.is-grouped
    //- Pagination Text
    .control.data-sheet-nav-control-center
      small.is-text-dark-grey {{ pageFrom }}-{{ pageTo }} / {{ displayModel.length }}
    //- Next/Prev Page
    .control.data-sheet-nav-control-center.text-align-center.is-expanded
      .field.has-addons
        .control
          //- Previous Page
          a.is-text-dark-grey(
            @click.prevent.stop="paginate.pageBack"
            title="Previous Page"
          )
            span.icon
              i.far.fa-caret-left(aria-hidden="true")
            small.is-hidden-tablet Previous
          span.is-text-light-grey.is-hidden-tablet(style="padding: 0 0.75rem;") |
        .control
          //- Particular Page
          input.input.is-small.data-sheet-nav-control-page-input(
            type="number"
            min="1"
            :max="paginate.lastPage"
            @input="paginate.pageTo($event.target.value)"
            :value="paginate.offset + 1"
            :size="1"
          )
        .control
          //- Next Page
          a.is-text-dark-grey(
            @click.prevent.stop="paginate.pageForward"
            title="Next Page"
          )
            small.is-hidden-tablet Next
            span.icon
              i.far.fa-caret-right(aria-hidden="true")
    //- Rows Per Page
    .control.data-sheet-nav-control-center
      .dropdown.is-hoverable.is-right
        .dropdown-trigger
          button.button.is-small(
            aria-haspopup="true"
            aria-controls="dropdown-menu"
          )
            span {{ paginate.rowsPerPage }}
            span.icon.is-small
              i.far.fa-angle-down(aria-hidden="true")
        .dropdown-menu.data-sheet-rows-per-page-menu(role="menu")
          .dropdown-content
            a.dropdown-item.is-text-dark-grey(@click.prevent.stop="paginate.setRowsPerPage(10)"): small 10 Rows
            a.dropdown-item.is-text-dark-grey(@click.prevent.stop="paginate.setRowsPerPage(50)"): small 50 Rows
            a.dropdown-item.is-text-dark-grey(@click.prevent.stop="paginate.setRowsPerPage(100)"): small 100 Rows
            a.dropdown-item.is-text-dark-grey(@click.prevent.stop="paginate.setRowsPerPage(250)"): small 250 Rows
            a.dropdown-item.is-text-dark-grey(@click.prevent.stop="paginate.setRowsPerPage(750)"): small 750 Rows
    //- Download
    .control.data-sheet-nav-control-center
      a.is-text-dark-grey(
        @click.prevent.stop="download"
        title="Download as Excel File"
      )
        span.icon.is-small
          i.far.fa-file-excel(aria-hidden="true")
    //- Settings
    //- .control.data-sheet-nav-control-center
    //-   a.is-text-dark-grey(
    //-     @click.prevent.stop="settings.show"
    //-     title="Show Settings"
    //-   )
    //-     span.icon
    //-       i.far.fa-cog(aria-hidden="true")
</template>

<script>
export default {
  name: 'DataSheetPaginationControl',
  props: ['displayModel', 'paginate', 'download', 'settings'],
  data () {
    return {}
  },
  computed: {
    pageFrom () {
      return (this.paginate.offset + 1) * this.paginate.rowsPerPage + 1 - this.paginate.rowsPerPage
    },
    pageTo () {
      let pageTo = (this.paginate.offset + 1) * this.paginate.rowsPerPage
      if (pageTo > this.displayModel.length) {
        pageTo = this.displayModel.length
      }
      return pageTo
    }
  }
}
</script>

<style lang="stylus">
.data-sheet-nav-control-page-input
  max-width 4rem
  min-width 0
</style>
