export default
{
    props: {
        totalRecords: { type: Number, required: true },
        pageSize: { type: Number, required: true },
        currentPage: { type: Number, required: true }
    },
    emits: ['pagerChange'],
    created: function () {
        this.totalPages = Math.ceil(this.totalRecords / this.pageSize);
        this.isFirstPage = this.currentPage < 2 ? true : false;
        this.isLastPage = this.currentPage == this.totalPages ? true : false;
        this.pagesize = getGridPageSize ? getGridPageSize() : 10 //override value from cookie if global function in master_ready.js;
    },
    updated: function() { 
        this.totalPages =   Math.ceil(this.totalRecords / this.pageSize);
        this.isFirstPage = this.currentPage < 2 ? true : false;
        this.isLastPage = this.currentPage == this.totalPages ? true : false;
        this.current = this.currentPage;
    },
    data (){
        return {
                size: this.pageSize, //Duplicate, but required for reactivity of component textbox value change
                totalPages: 0,
                isFirstPage: true,
                isLastPage: false
            }
        },
    methods: {
        validateNumber: function(o) {
            const {e, i} = o;
            if (e && e.target && e.target.value && e.target.value != e.target.value.replace(/[^0-9]/g, '')) {
                switch(i)
                {
                    case 'page':
                        e.target.value = e.target.value.replace(/[^0-9]/g, this.currentPage);break;
                    case 'size':
                        e.target.value = e.target.value.replace(/[^0-9]/g, this.pageSize);break;
                }
           }
        },
        getCurrentPageLabel: function() {
            let fromRecord = (((this.currentPage-1) * this.pageSize) + 1);
            let toRecord = ((this.currentPage) * this.pageSize);
            toRecord = toRecord > this.totalRecords ? this.totalRecords : toRecord;
            return 'Showing ' + fromRecord + ' - ' + toRecord + ' of ' + this.totalRecords;
        },
        pageChangeHandler: function (o) {
            let { e, val } = o;
            var code = e.keyCode || e.which;
            if (code == 9 || code == 13 || code == 1 || code == 0) {
                let nextPage = this.currentPage;
                switch (val) {
                    case 'next':
                        nextPage += 1;
                        if (nextPage > this.totalPages)
                            nextPage = this.totalPages;
                        break;
                    case 'prev':
                        nextPage -= 1;
                        if (nextPage < 1)
                            nextPage = 1;
                        break;
                    case 'first':
                        nextPage = 1;
                        break;
                    case 'last':
                        nextPage = this.totalPages;
                        break;
                    default:
                        if (!isNaN(val))
                        {
                            nextPage = parseInt(val);
                            nextPage = nextPage < 1 ? 1 : nextPage;
                            nextPage = nextPage > this.totalPages ? this.totalPages : nextPage;
                        }
                }

                let pgSize = this.pageSize;

                if(this.currentPage != nextPage)
                    this.$emit('pagerChange', { pageIndex: nextPage, pageSize: pgSize });
                else
                    this.$forceUpdate();
            }
        },
        pageSizeChangeHandler: function(o) {
            let { e, size } = o;
            let code = e.keyCode || e.which;
            if (code == 9 || code == 13 || code == 1 || code == 0) {
                let newSize = this.pageSize;
                if (!isNaN(size) && size > 0 && size < 1000)
                    newSize = parseInt(size);
                if(newSize != this.pageSize)
                {
                    //setCookie('MachPanel_PageSize','NumberOfRows='+newSize, 365);
                    let exdate = new Date();
                    exdate.setDate(exdate.getDate() + 365);
                    var c_value = 'NumberOfRows='+newSize + "; expires=" + exdate.toUTCString();
                    document.cookie = "MachPanel_PageSize=" + c_value + ';path=/';
                    
                }
                this.$emit('pagerChange', { pageIndex: 1, pageSize: newSize });
            }
        }
    },
    template: `
        <tr class="modal-col-white">
            <td class="parent-pager-row" colspan="100%">
                <div class="pager-row">
                    <div class="col-sm-4 col-xs-12 pager-displaying" :innerHTML="getCurrentPageLabel()" />
                    <div class="col-sm-4 col-xs-12 pager-next">
                        <ul class="pagination">
                            <li class="waves-effect" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null">
                                <a @click="pageChangeHandler({e:$event, val:'first'})" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null" >
                                    <i class="material-icons" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null">first_page</i>
                                </a>
                            </li>
                            <li class="waves-effect" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null">
                                <a @click="pageChangeHandler({e:$event, val:'prev'})" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null">
                                    <i class="material-icons" :class="{disabled:isFirstPage}" :disabled="isFirstPage?true:null">chevron_left</i>
                                </a>
                            </li>
                            <li class="waves-effect">
                                <div class="pull-left" style="width: 40px;">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <input type="text" :value="currentPage" class="newGoTo form-control" @keyup="validateNumber({e:$event, i:'page'})" @keyup.enter="pageChangeHandler({e:$event, val:$event.target.value})" @focusout="pageChangeHandler({e:$event, val:$event.target.value})" style="text-align: center" :class="{disabled:(totalPages == 1)}" :disabled="(totalPages == 1)?true:null">
                                        </div>
                                    </div>
                                </div>
                                <div class="pull-left">
                                    <label class="pull-left" :innerHTML="'&nbsp;&nbsp;/&nbsp;' + this.totalPages">
                                    </label>
                                </div>
                            </li>
                            <li class="waves-effect" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">
                                <a @click="pageChangeHandler({e:$event, val:'next'})" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">
                                    <i class="material-icons" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">chevron_right</i>
                                </a>
                            </li>
                            <li class="waves-effect" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">
                                <a @click="pageChangeHandler({e:$event, val:'last'})" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">
                                    <i class="material-icons" :class="{disabled:isLastPage}" :disabled="isLastPage?true:null">last_page</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="pull-right">
                            <label class="pull-left">
                                Showing per page
                            </label>
                            <div class="pull-left" style="width: 35px; margin-left: 15px; margin-right: 5px;">
                                <div class="form-group">
                                    <div class="form-line">
                                        <input type="text" v-model="size" maxlength="3" style="padding-left:5px"  class="form-control" @keyup="validateNumber({e:$event, i:'size'})" @keydown.enter="pageSizeChangeHandler({e:$event, size:this.size});" @focusout="pageSizeChangeHandler({e:$event, size:this.size});">
                                    </div>
                                </div>
                            </div>
                            <label class="pull-left">
                                <a @click="pageSizeChangeHandler({e:$event, size:this.size});" style="display: inline">Change</a>
                            </label>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    `
}