import Vue from 'vue/dist/vue'
import EventBus from '../util/EventBus';
import EventTypes from '../util/EventTypes';

Vue.component('library-pagination', {
    props: {
        context: {
            type: Object,
            default() {
                return {}
            }
        },
    },
    data: function () {
        return {};
    },
    methods: {
        change: function (e) {
            e.preventDefault();
            console.log(this);
            let newPage = parseInt(e.target.value);
            this.goToPage(newPage);
        },
        goToPage: (page) => {
            EventBus.$emit(EventTypes.LIBRARY_GO_TO_PAGE, page);
        },
        firstPage: function () {
            this.goToPage(1)
        },
        lastPage: function () {
            this.goToPage(this.context.maxPage)
        },
        prevPage: function () {
            this.goToPage(Math.max(this.context.page - 1, 1))
        },
        nextPage: function () {
            this.goToPage(Math.min(this.context.page + 1, this.context.maxPage))
        },
    },
    mounted() {
    },
    template: `
      <div class="row library-pagination" :class="{'unused': context.maxPage <= 1}">
        <nav>
          <ul class="pagination">
            <li class="page-item">
              <button class="page-link" @click="firstPage" :disabled="context.page === 1">
                <i class="fa fa-chevrons-left"></i>
              </button>
            </li>
            <li class="page-item">
              <button class="page-link" @click="prevPage" :disabled="context.page === 1">
                <i class="fa fa-chevron-left"></i>
              </button>
            </li>
            <li class="page-item input-group">
              <input v-model="context.page" @input="change" class="page-input"/>
            </li>
            <li class="page-item">
              <button class="page-link" @click="nextPage" :disabled="context.page === context.maxPage">
                <i class="fa fa-chevron-right"></i>
              </button>
            </li>
            <li class="page-item">
              <button class="page-link" @click="lastPage" :disabled="context.page === context.maxPage">
                <i class="fa fa-chevrons-right"></i>
              </button>
            </li>
          </ul>
        </nav>
      </div>
    `
});