<template>
    <div class="row no-margin" v-if="Object.keys(pagination).length > 0">
        <div class="col no-padding">
            <div class="row justify-content-end" v-if="pagination.last_page !== 1">
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5 pointer b-grey pointer" @click="callPage(1)" v-if="pagination.current_page !== 1 && !pageNumbers().includes(1)">
                    <i class="fa fa-angle-double-left fs-14 muted lh-16"></i>
                </div>
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5" v-for="n in pageNumbers()" @click="callPage(n)" :class="[{'b-grey': n !== pagination.current_page}, {'pointer': n !== pagination.current_page}, {'b-complete': n === pagination.current_page}, {'bg-complete': n === pagination.current_page}]">
                    <small class="fs-11" :class="[{'muted': n !== pagination.current_page}, {'text-white': n === pagination.current_page}, {'bold': n === pagination.current_page}]">{{n}}</small>
                </div>
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5 pointer b-grey pointer" @click="callPage(pagination.last_page)" v-if="pagination.current_page !== pagination.last_page && !pageNumbers().includes(pagination.last_page)">
                    <i class="fa fa-angle-double-right fs-14 muted lh-16"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    import { useQueueStore } from '@/stores/queue';

    const props = defineProps<{
        section: string;
    }>();

    const queueStore = useQueueStore();
    const pagination = ref<any>({});

    const makePagination = (newPagination: any) => {
        pagination.value = newPagination;
    };

    const callPage = (page: number) => {
        if (page !== pagination.value.current_page) {
            queueStore.updateListQueue({
                name: props.section,
                page: page,
                filters: queueStore.getListDetails(props.section)?.filters ?? {}
            });
        }
    };

    const pageNumbers = () => {
        let pages = 5;
        let numbers: number[] = [],
            partition = (pages - 1) / 2,
            previousOverflow = -(pagination.value.current_page - partition - 1),
            nextOverflow = -(pagination.value.last_page - (pagination.value.current_page + partition)),
            previous = partition + (nextOverflow > 0 ? nextOverflow : 0),
            next = partition + (previousOverflow > 0 ? previousOverflow : 0);

        for (let i = pagination.value.current_page - previous; i < pagination.value.current_page; i++) {
            if (i >= 1) {
                numbers.push(i);
            }
        }

        numbers.push(pagination.value.current_page);

        for (let i = pagination.value.current_page + 1; i <= (pagination.value.current_page + next); i++) {
            if (i <= pagination.value.last_page) {
                numbers.push(i);
            }
        }

        return numbers;
    };

    defineExpose({
        makePagination
    });
</script>
