<template>
    <nav>
        <ul class="pagination justify-content-end">
            <li class="page-item"
                :class="{'disabled': isInFirstPage}">
                <a @click="onClickFirstPage"
                   :disabled="isInFirstPage"
                   class="page-link"
                   href="javascript:void(0)">
                    {{$t('first')}}
                </a>
            </li>
            <li class="page-item"
                :class="{'disabled': isInFirstPage}">
                <a @click="onClickPreviousPage"
                   :disabled="isInFirstPage"
                   class="page-link"
                   href="javascript:void(0)">
                    {{$t('prev')}}
                </a>
            </li>
            <li v-for="page in pages"
                :key="page.name"
                :class="{ 'active': isPageActive(page.name) }"
                class="page-item">
                <a @click="onClickPage(page.name)"
                   :disabled="page.isDisabled"
                   class="page-link"
                   href="javascript:void(0)">
                    {{ page.name }}
                </a>
            </li>
            <li :class="{'disabled': isInLastPage}"
                class="page-item">
                <a @click="onClickNextPage"
                   :disabled="isInLastPage"
                   class="page-link"
                   href="javascript:void(0)">
                    {{$t('next')}}
                </a>
            </li>
            <li :class="{'disabled': isInLastPage}"
                class="page-item">
                <a @click="onClickLastPage"
                   :disabled="isInLastPage"
                   class="page-link"
                   href="javascript:void(0)">
                    {{$t('last')}}
                </a>
            </li>
        </ul>
    </nav>
</template>

<script>
import loc from './j-pagination.resx';
import { i18n } from "../../localization/vue-i18n";
export default {
    i18n: i18n(loc),
    props: {
        maxVisibleButtons: {
            type: Number,
            required: false,
            default: 3
        },
        totalRecords: {
            type: Number,
            required: true
        },
        perPage: {
            type: Number,
            required: true
        },
        currentPage: {
            type: Number,
            required: true
        },
    },
    computed: {
        startPage() {
            var res;
            if (this.currentPage === 1) {
                res = 1;
            } else if (this.currentPage === this.totalPages) {
                res = Math.max(this.totalPages - this.maxVisibleButtons + 1, 1);
            } else {
                res = this.currentPage - 1;
            }
            return res;
        },
        endPage() {
            return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages);
        },
        pages() {
            const range = [];
            for (let i = this.startPage; i <= this.endPage; i += 1) {
                range.push({
                    name: i,
                    isDisabled: i === this.currentPage
                });
            }
            return range;
        },
        isInFirstPage() {
            return this.currentPage === 1;
        },
        isInLastPage() {
            return this.currentPage === this.totalPages;
        },
        totalPages() {
            var len = this.perPage;
            var N = this.totalRecords;
            var mod = N % len;
            var res;
            if (mod === 0) {
                res = N / len;
            } else {
                res = Math.floor(N / len) + 1;
            }
            return res;
        }
    },
    methods: {
        onClickFirstPage() {
            this.$emit('pagechanged', 1);
        },
        onClickPreviousPage() {
            this.$emit('pagechanged', this.currentPage - 1);
        },
        onClickPage(page) {
            this.$emit('pagechanged', page);
        },
        onClickNextPage() {
            this.$emit('pagechanged', this.currentPage + 1);
        },
        onClickLastPage() {
            this.$emit('pagechanged', this.totalPages);
        },
        isPageActive(page) {
            return this.currentPage === page;
        },
    }
}
</script>