<script setup lang="ts">
import { computed } from "vue";
import PageButton from "./PageButton.vue";

const PAGE_NUMBER = 7;

const props = defineProps<{
  pageNbr: number;
  currentPage: number;
}>();

const emit = defineEmits(["setPage"]);

const pageToDraw = computed(() => {
  return Math.min(props.pageNbr, PAGE_NUMBER);
});

const isAtStart = computed(() => {
  return props.currentPage < 4;
});

const isAtEnd = computed(() => {
  return props.currentPage > props.pageNbr - 2;
});

function setPage(page: number) {
  emit("setPage", page);
}
</script>

<template>
  <div>
    <button
      class="btn-small btn-navig"
      :disabled="currentPage <= 1"
      :class="{ 'btn-secondary': currentPage > 1, 'bg-grey': currentPage <= 1 }"
      @click="setPage(currentPage - 1)"
    >
      ←
    </button>
    <span v-if="pageNbr <= PAGE_NUMBER">
      <span v-for="index in pageToDraw" :key="index">
        <PageButton
          @click="setPage(index)"
          :current-page="currentPage"
          :page="index"
        ></PageButton>
      </span>
    </span>
    <span v-else-if="isAtStart">
      <PageButton
        :current-page="currentPage"
        :page="1"
        @click="setPage(1)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="2"
        @click="setPage(2)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="3"
        @click="setPage(3)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="4"
        @click="setPage(4)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="5"
        @click="setPage(5)"
      ></PageButton>
      <button disabled class="btn-small bg-grey disabled">…</button>
      <PageButton :current-page="currentPage" :page="pageNbr"></PageButton>
    </span>
    <span v-else-if="isAtEnd">
      <PageButton
        :current-page="currentPage"
        :page="1"
        @click="setPage(1)"
      ></PageButton>
      <button disabled class="btn-small bg-grey disabled">…</button>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr - 4"
        @click="setPage(pageNbr - 4)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr - 3"
        @click="setPage(pageNbr - 3)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr - 2"
        @click="setPage(pageNbr - 2)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr - 1"
        @click="setPage(pageNbr - 1)"
      ></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr"
        @click="setPage(pageNbr)"
      ></PageButton>
    </span>
    <span v-else>
      <PageButton
        :current-page="currentPage"
        :page="1"
        @click="setPage(1)"
      ></PageButton>
      <button disabled class="btn-small bg-grey disabled">…</button>
      <PageButton
        :current-page="currentPage"
        :page="currentPage - 1"
        @click="setPage(currentPage - 1)"
      ></PageButton>
      <PageButton :current-page="currentPage" :page="currentPage"></PageButton>
      <PageButton
        :current-page="currentPage"
        :page="currentPage + 1"
        @click="setPage(currentPage + 1)"
      ></PageButton>
      <button disabled class="btn-small bg-grey disabled">…</button>
      <PageButton
        :current-page="currentPage"
        :page="pageNbr"
        @click="setPage(pageNbr)"
      ></PageButton>
    </span>
    <button
      class="btn-small btn-navig"
      :disabled="currentPage >= pageNbr"
      :class="{
        'btn-secondary': currentPage < pageNbr,
        'bg-grey': currentPage >= pageNbr,
      }"
      @click="setPage(currentPage + 1)"
    >
      →
    </button>
  </div>
</template>
