<template>
    <nav class="relative z-0 inline-flex shadow-sm">

        <!-- Previous btn -->
        <button type="button"
                aria-label="Previous"
                class="-ml-px relative inline-flex items-center px-2 py-2 border text-sm leading-5 font-medium transition ease-in-out duration-150 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 rounded-l-md"
                :class="previousIsEnabled() ? 'border-gray-300 bg-white text-gray-700 hover:text-gray-500' : 'bg-gray-200 text-gray-400 cursor-not-allowed'"
                @click="previousButtonClicked()"
        >
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                      clip-rule="evenodd"
                />
            </svg>
            <span class="lg:hidden">Previous</span>
        </button>

        <!-- Page Links -->
        <div v-if="totalPage >= 1" class="hidden lg:block advanced">
            <button v-for="page in pages"
                    v-if="page.show"
                    type="button"
                    class="-ml-px relative inline-flex items-center px-4 py-2 border text-sm leading-5 font-medium transition ease-in-out duration-150 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
                    :class="pageIsSelected(page) ? 'bg-gray-700 text-white' : 'border-gray-300 bg-white text-gray-700 hover:text-gray-500'"
                    @click="pageButtonClicked(page)"
            >
                {{ page.content }}
            </button>
        </div>

        <!-- Next btn -->
        <button type="button"
                aria-label="Next"
                class="-ml-px relative inline-flex items-center px-2 py-2 border text-sm leading-5 font-medium transition ease-in-out duration-150 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 rounded-r-md"
                :class="nextIsEnabled() ? 'border-gray-300 bg-white text-gray-700 hover:text-gray-500' : 'bg-gray-200 text-gray-400 cursor-not-allowed' "
                @click="nextButtonClicked()"
        >
            <span class="lg:hidden">Next</span>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"
                />
            </svg>
        </button>
    </nav>
</template>


<script>
export default {
    props : {
        totalPage : {
            type : Number,
            required : true
        },
        currentPage : {
            type : Number,
            default : 1,
        },
        pageRange : {
            type : Number,
            default : 3
        },
    },
    data() {
        return {
            selected : this.currentPage,
        }
    },
    computed : {
        pages() {
            // Create the array
            let pages = this.createPagesArray();

            // Insert a blank at the start and end of the array to indicate more pages
            pages = this.insertBlankPages(pages);

            // Loop through the pages array
            for (let i = 0; i < pages.length; i++) {

                // If the pageIndex is either the first or last entry in the array then show it
                if (this.isFirstPage(i) || this.isLastPage(i, pages)) {
                    pages[i].show = true;
                }

                // If the selected page is less than the amount of page links to show
                if (this.selected <= this.pageRange) {

                    // If the selected page is equal to the number of visible page links
                    if (this.selected === this.pageRange) {
                        if (i >= 2 && i <= this.pageRange + 1) {
                            pages[i].show = true;
                        }
                    } else {
                        if (i >= 2 && i <= this.pageRange) {
                            pages[i].show = true;
                        }
                    }
                    pages[pages.length - 2].show = true;

                } else {
                    if (this.selected > this.pageRange) {
                        if (i >= this.selected - 1 && (this.selected + 2) < pages.length - 2 && i <= this.selected + 1) {
                            pages[1].show = true;
                            pages[pages.length - 2].show = true;
                            pages[i].show = true;
                        } else {
                            if (i >= pages.length - 2 - this.pageRange && (this.selected + 2) >= pages.length - 2) {
                                pages[1].show = true;
                                pages[pages.length - 2].show = false;
                                pages[i].show = true;
                            }
                        }
                    }
                }
            }

            return pages;
        },
    },
    methods : {
        createPagesArray() {
            let pages = [];

            // Loop through the number of items and put them into the pages array
            for (let i = 0; i < this.totalPage; i++) {
                pages[i] = {
                    number : i + 1,
                    content : i + 1,
                    disabled : false,
                    show : false
                };
            }

            return pages;
        },
        insertBlankPages(pages) {

            let blank = {
                number : null,
                content : "...",
                disabled : true,
                show : false
            };

            // Insert a blank entry after the first page
            pages.splice(1, 0, blank);

            // Insert a blank entry before the last page
            pages.splice(pages.length - 1, 0, blank);

            return pages;
        },
        isFirstPage(pageIndex) {
            return pageIndex === 0;
        },
        isLastPage(pageIndex, pages) {
            return pageIndex === pages.length - 1;
        },

        previousIsEnabled() {
            return this.selected !== 1;
        },
        previousButtonClicked() {
            if (this.selected === 1) {
                return false;
            }
            this.selected--;
            this.$emit('paginationChanged', this.selected);
        },

        pageIsSelected(page) {
            return page.content === this.selected;
        },
        pageButtonClicked(page) {
            if (page.disabled) {
                return false;
            }
            this.selected = page.number;
            this.$emit('paginationChanged', page.number);
        },

        nextIsEnabled() {
            return this.selected !== this.totalPage;
        },
        nextButtonClicked() {
            if (this.selected === this.totalPage) {
                return false;
            }
            this.selected++;
            this.$emit('paginationChanged', this.selected);
        }
    }
}
</script>
