<template>
    <div class="pagination">
        <ButtonComponent
            small
            transparent
            v-if="!isMobile"
            :class="[{disabled__icon: firstPageIsActive}, 'arrow']"
            ref="previousPageButton"
            @click="changeCurrentPage(currentPage -1)">
            <LeftIcon/>
        </ButtonComponent>
        <template v-if="hasToSplitPageLinks && currentPageIsOnLeftEdge">
            <ButtonComponent
                small
                :transparent="page !== currentPage"
                v-for="page in pagesOnOneSide"
                :key="page"
                :class="{active: page === currentPage}"
                @click="changeCurrentPage(page)"
            >
                {{ page }}
            </ButtonComponent>
            <span>...</span>
            <ButtonComponent
                small
                :transparent="page !== currentPage"
                v-for="page in [totalPages]"
                :key="page"
                :class="{active: page === currentPage}"
                @click="changeCurrentPage(page)"
            >
                {{ page }}
            </ButtonComponent>
        </template>

        <template v-else-if="hasToSplitPageLinks && currentPageIsOnRightEdge">
            <ButtonComponent
                small
                v-for="page in 1"
                :key="page"
                :transparent="page !== currentPage"
                :class="{active: page === currentPage}"
                @click="changeCurrentPage(page)"
            >
                {{ page }}
            </ButtonComponent>
            <span>...</span>
            <ButtonComponent
                small
                transparent
                v-for="page in lastPages"
                :key="page"
                :transparent="page !== currentPage"
                :class="{active: page === currentPage}"
                @click="changeCurrentPage(page)"
            >
                {{ page }}
            </ButtonComponent>
        </template>

        <template v-else-if="hasToSplitPageLinks && !currentPageIsOnLeftEdge && !currentPageIsOnRightEdge">
            <ButtonComponent small transparent @click="changeCurrentPage(1)">
                {{ 1 }}
            </ButtonComponent>
            <span>...</span>
            <ButtonComponent small transparent @click="changeCurrentPage(currentPage - 1)">
                {{ currentPage - 1 }}
            </ButtonComponent>
            <ButtonComponent small class="active">
                {{ currentPage }}
            </ButtonComponent>
            <ButtonComponent small transparent @click="changeCurrentPage(currentPage + 1)">
                {{ currentPage + 1 }}
            </ButtonComponent>
            <span>...</span>
            <ButtonComponent
                transparent
                small
                @click="changeCurrentPage(totalPages)">
                {{ this.totalPages }}
            </ButtonComponent>
        </template>

        <template v-else>
            <ButtonComponent
                small
                v-for="page in totalPages"
                :transparent="page !== currentPage"
                :key="page"
                :class="{active: page === currentPage}"
                @click="changeCurrentPage(page)"
            >
                {{ page }}
            </ButtonComponent>
        </template>

        <ButtonComponent
            small
            transparent
            v-if="!isMobile"
            :class="[{disabled__icon: lastPageIsActive}, 'arrow']"
            ref="nextPageButton"
            @click="changeCurrentPage(currentPage +1)">
            <RightIcon/>
        </ButtonComponent>
    </div>
</template>

<script lang="ts">
    import mediaQueriesMixin from "../../mixins/mediaQueriesMixin";
    import mixins from "vue-typed-mixins";
    import LeftIcon from "../../components/icons/navigation/LeftIcon.vue";
    import RightIcon from "../../components/icons/navigation/RightIcon.vue";
    import ButtonComponent from "../../components/buttonComponent/ButtonComponent.vue";

    export const MAX_ELEMENTS = 7;
    export const MAX_ELEMENTS_MOBILE = 5;
    export const PAGES_ON_ONE_SIDE = 5;
    export const PAGES_ON_ONE_SIDE_MOBILE = 3;

    export default mixins(mediaQueriesMixin).extend({
        mixins: [
            mediaQueriesMixin,
        ],
        data() {
            return {};
        },
        components: {
            LeftIcon,
            RightIcon,
            ButtonComponent,
        },
        props: {
            value: Number,
            totalPages: Number,
        },
        computed: {
            currentPage(): number {
                return this.value;
            },
            hasToSplitPageLinks(): boolean {
                return this.totalPages > this.maxElements;
            },
            maxElements(): number {
                return this.isMobile ? MAX_ELEMENTS_MOBILE : MAX_ELEMENTS;
            },
            firstPageIsActive(): boolean {
                return this.currentPage === 1;
            },
            lastPageIsActive(): boolean {
                return this.currentPage === this.totalPages;
            },
            currentPageIsOnLeftEdge(): boolean {
                return this.currentPage >= 1 && this.currentPage < this.pagesOnOneSide;
            },
            currentPageIsOnRightEdge(): boolean {
                return this.currentPage > (this.totalPages - (this.pagesOnOneSide - 1)) && this.currentPage <= this.totalPages;
            },
            lastPages(): number[] {
                let arr: number[] = [];
                for (let i = this.totalPages; this.totalPages - this.pagesOnOneSide < i; i--) {
                    arr.unshift(i);
                }
                return arr;
            },
            pagesOnOneSide(): number {
                return this.isMobile ? PAGES_ON_ONE_SIDE_MOBILE : PAGES_ON_ONE_SIDE;
            },
        },
        methods: {
            changeCurrentPage(page: number): void {
                if (page === this.currentPage) {
                    return;
                }

                this.$emit('input', page);
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "pagination";
</style>
