<script setup>
defineProps(['currentPage', 'totalPages', 'setPage', 'loadFunction', 'isLoading'])
</script>

<template>
  <nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <!-- Previous page -->
    <a class="pagination-previous pagination-button"
       @click="setPage(currentPage - 1); loadFunction()"
        v-if="totalPages <= 15"
       :class="{ 'is-disabled': currentPage === 1, 'is-skeleton': isLoading }"
    >Forrige side</a>
    <!-- Pagination skeleton while loading -->
    <!-- Pagination (IF there's less than 20 pages) -->
    <ul class="pagination-list mt-1">
      <li v-for="page in totalPages" :key="page" v-if="totalPages <= 15">
        <a class="pagination-link"
           @click="setPage(page); loadFunction()"
           :class="{ 'is-skeleton': isLoading, 'is-current': currentPage === page }"
        >{{ page }}</a>
      </li>
      <!-- Pagination (IF there's more than 20 pages) -->
      <li v-else>
        <!-- Regular pagination -->
        <a class="pagination-link"
           v-if="currentPage > 3"
           @click="setPage(1); loadFunction()"
           :class="{ 'is-skeleton': isLoading, 'is-current': currentPage === 1 }"
        >1</a>
        <span class="pagination-ellipsis"
              v-if="currentPage > 3"
        >&hellip;</span>
        <!-- If there isn't 2 next pages, show the additional pages to the left, this is done to keep the pagination buttons the same size -->
        <a class="pagination-link"
           v-if="currentPage > 3 && totalPages - currentPage < 1"
           @click="setPage(totalPages - 4); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage - 4 }}</a>
        <a class="pagination-link"
           v-if="currentPage > 2 && totalPages - currentPage < 2"
           @click="setPage(totalPages - 3); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage - 3 }}</a>
        <!-- Regular pagination -->
        <a class="pagination-link"
           v-if="currentPage > 2"
           @click="setPage(currentPage - 2); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage - 2 }}</a>
        <a class="pagination-link"
            v-if="currentPage > 1"
           @click="setPage(currentPage - 1); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage - 1 }}</a>
        <a class="pagination-link is-current"
           @click="setPage(currentPage); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage }}</a>
        <a class="pagination-link"
           v-if="currentPage < totalPages"
           @click="setPage(currentPage + 1); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage + 1 }}</a>
        <a class="pagination-link"
            v-if="currentPage < totalPages - 1"
           @click="setPage(currentPage + 2); loadFunction()"
           :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage + 2 }}</a>
        <!-- If the current page is less than 3, show the additional pages to the right, this is done to keep the pagination buttons the same size -->
        <a class="pagination-link"
            v-if="currentPage < totalPages - 3 && currentPage < 3"
           @click="setPage(totalPages + 3); loadFunction()"
            :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage + 3 }}</a>
        <a class="pagination-link"
            v-if="currentPage < totalPages - 4 && currentPage < 2"
           @click="setPage(totalPages + 4); loadFunction()"
            :class="{ 'is-skeleton': isLoading }"
        >{{ currentPage + 4 }}</a>
        <span class="pagination-ellipsis"
              v-if="currentPage < totalPages - 2"
        >&hellip;</span>
        <a class="pagination-link"
            v-if="currentPage < totalPages - 2"
           @click="setPage(totalPages); loadFunction()"
           :class="{ 'is-skeleton': isLoading, 'is-current': currentPage === totalPages }"
        >{{ totalPages }}</a>
      </li>
    </ul>
    <a class="pagination-next pagination-button"
        v-if="totalPages <= 15"
       @click="setPage(currentPage + 1); loadFunction()"
       :class="{ 'is-disabled': currentPage === totalPages, 'is-skeleton': isLoading }"
    >Næste side</a>
    <!-- Navigation when there's more than 15 pages -->
    <a class="pagination-previous pagination-button"
        v-if="totalPages > 15"
       @click="setPage(currentPage - 1); loadFunction()"
       :class="{ 'is-disabled': currentPage === 1, 'is-skeleton': isLoading }"
    >Forrige side</a>
    <a class="pagination-next pagination-button"
        v-if="totalPages > 15"
       @click="setPage(currentPage + 1); loadFunction()"
       :class="{ 'is-disabled': currentPage === totalPages, 'is-skeleton': isLoading }"
    >Næste side</a>
  </nav>
  <p class="has-text-centered" v-if="totalPages > 0">Side {{ currentPage }} af {{ totalPages }}</p>
  <p class="has-text-centered" v-else>Henter data...</p>
</template>

<style scoped>
.pagination-button {
  min-width: 100px;
}
</style>