<script lang="ts">
import { faArrowAltCircleDown } from '@fortawesome/free-regular-svg-icons';
import { faChevronLeft, faChevronRight, faFastBackward, faFastForward } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

export default {
    components: {
        FontAwesomeIcon: FontAwesomeIcon
    },
    props: {
        totalCount: {
            type: Number,
            required: true
        },
        pageCount: {
            type: Number,
            required: true
        },
        perPage: {
            type: Number,
            required: true
        },
        page: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            totalCount: this.totalCount,
            pageCount: this.pageCount,
            perPage: this.perPage,
            page: this.page,
            arrowDown: faArrowAltCircleDown,
            chevronLeft: faChevronLeft,
            chevronRight: faChevronRight,
            fastBackward: faFastBackward,
            fastForward: faFastForward
        }
    },
    watch: {
        page(newValue: any, oldValue: any) {
            this.page = newValue;
        },
        perPage(newValue: any, oldValue: any) {
            this.perPage = newValue;
        },
        pageCount(newValue: any, oldValue: any) {
            this.pageCount = newValue;
        },
        totalCount(newValue: any, oldValue: any) {
            this.totalCount = newValue;
        }
    },
    methods: {
        pageChange(event: any){
            this.$emit('pageChange', event);
        },
        pageSize(event: any){
            this.$emit('pageSize', event);
        },
        firstPage(event: any){
            this.$emit('firstPage', event);
        },
        lastPage(event: any){
            this.$emit('lastPage', event);
        },
        previousPage(event: any){
            this.$emit('previousPage', event);
        },
        nextPage(event: any){
            this.$emit('nextPage', event);
        }
    }
}

</script>

<template>
    <v-row class="text-center px-4 align-center" wrap>
        <v-col class="text-truncate" cols="12" md="2">
            Total {{ totalCount }} records
        </v-col>
        <v-col cols="12" md="8">
            <v-pagination
                v-model="page"
                :prev-icon="''"
                :next-icon="''"
                :width="'200px'"
                :length="pageCount"
                @update:model-value="pageChange($event)">
                <template v-if="fastBackward" #prev>
                    <div style="display:flex; margin-top: 6px;">
                    <v-btn v-if="pageCount > 1" @click="firstPage($event)" style="margin-right: 10px;">
                        <FontAwesomeIcon :icon="fastBackward" color="#303133"/>
                    </v-btn>
                    <v-btn v-if="pageCount > 1" @click="previousPage($event)">
                        <FontAwesomeIcon color="#303133" :icon="chevronLeft"/>
                    </v-btn>
                    </div>
                </template>
                <template v-if="chevronLeft" #next>
                    <div style="display:flex; margin-top: 6px;">
                    <v-btn v-if="pageCount > 1" @click="nextPage($event)">
                        <FontAwesomeIcon color="#303133" :icon="chevronRight"/>
                    </v-btn>
                    <v-btn v-if="pageCount > 1" @click="lastPage($event)" style="margin-left: 10px;">
                        <FontAwesomeIcon color="#303133" :icon="fastForward"/>
                    </v-btn>
                    </div>
                </template>
            </v-pagination>
        </v-col>
        <v-col cols="12" md="2">
            <v-select 
                v-if="pageCount > 1"
                dense
                outlined
                hide-details
                :value="perPage"
                :menu-icon="''"
                label="Items per page"
                :items="[10,20,50,100]"
                @update:modelValue="pageSize($event)">
                <template v-if="arrowDown" #append-inner>
                    <FontAwesomeIcon :icon="arrowDown" />
                </template>
            </v-select>
        </v-col>
    </v-row>

</template>