<template>
	<nav :aria-label="$t('pagination.title')" v-if="nbPages > 1">
		<ul class="pagination justify-content-center">
			<li class="page-item" v-if="currentPage > 2 && nbPages > 3">
				<a class="page-link" href="#" @click="firstPage($event)">
					<span :aria-label="$t('pagination.page') + ' 1'">1</span>
				</a>
			</li>
			<li class="page-item disabled" v-if="currentPage > 3 && nbPages > 4">
				<span class="page-link"><span aria-hidden="true">...</span></span>
			</li>
			<li
				class="page-item"
				v-for="index in listPagesUtiles"
				:key="index"
				:class="{ active: index == currentPage }">
				<a
					v-if="index != currentPage"
					class="page-link"
					href="#"
					@click="goto(index, $event)">
					<span :aria-label="$t('pagination.page') + ' ' + index">{{
						index
					}}</span></a
				>
				<span v-else class="page-link">{{ index }}</span>
			</li>
			<li
				class="page-item disabled"
				v-if="currentPage < nbPages - 2 && nbPages > 4">
				<span class="page-link"><span aria-hidden="true">...</span></span>
			</li>
			<li class="page-item" v-if="currentPage < nbPages - 1 && nbPages > 3">
				<a class="page-link" href="#" @click="lastPage($event)">
					<span :aria-label="$t('pagination.page') + ' ' + nbPages">{{
						nbPages
					}}</span>
				</a>
			</li>
		</ul>
	</nav>
</template>

<script>
export default {
	props: {
		currentPage: {
			type: Number,
			required: true
		},
		pageSize: {
			type: Number,
			required: true
		},
		arrayLength: {
			type: Number,
			required: true
		}
	},
	methods: {
		goto(i, e) {
			if (e !== undefined) e.preventDefault()
			this.$emit("update:currentPage", i)
		},
		firstPage: function (e) {
			e.preventDefault()
			this.$emit("update:currentPage", 1)
		},
		lastPage: function (e) {
			e.preventDefault()
			this.$emit("update:currentPage", this.nbPages)
		}
	},
	computed: {
		nbPages() {
			return Math.ceil(this.arrayLength / this.pageSize)
		},
		listPagesUtiles() {
			if (this.nbPages < 3) {
				return [1, 2]
			}

			if (this.currentPage == 1) {
				return [1, 2, 3]
			}

			if (this.currentPage == this.nbPages) {
				return [this.nbPages - 2, this.nbPages - 1, this.nbPages]
			}

			return [this.currentPage - 1, this.currentPage, this.currentPage + 1]
		}
	},
	watch: {
		arrayLength: {
			handler(n, o) {
				this.goto(1)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.pagination {
	user-select: none;
}

.disabled,
.active {
	cursor: not-allowed;
}
</style>