<template>
  <nav class="pagination" role="navigation" aria-label="pagination">
    <nuxt-link
      class="pagination-previous"
      :disabled="!prev ? 'disabled' : undefined"
      :tabindex="!prev ? -1 : undefined"
      :to="genRouteQuery(prev)"
      @click="checkAndUpdate(prev)"
    >
      Précédent
    </nuxt-link>
    <nuxt-link
      class="pagination-next"
      :disabled="!next ? 'disabled' : undefined"
      :tabindex="!next ? -1 : undefined"
      :to="genRouteQuery(next)"
      @click="checkAndUpdate(next)"
    >
      Suivant
    </nuxt-link>
    <ul class="pagination-list">
      <li v-for="(i, index) in items" :key="index">
        <span v-if="i === ELLIPSIS" class="pagination-ellipsis">&hellip;</span>
        <nuxt-link
          v-else
          class="pagination-link"
          :class="{ 'is-current': current === i }"
          :aria-label="current === i ? `Page ${i}` : `Aller à la page ${i}`"
          :aria-current="current === i ? 'page' : undefined"
          :to="genRouteQuery(i)"
          @click="checkAndUpdate(i)"
        >
          {{ i }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
const router = useRouter()
const props = defineProps({
  nbToShow: { type: Number, default: 2 },
  max: { type: Number, required: true },
  modelValue: { type: Number, required: true },
})
const current = useModel<number>("modelValue")
const ELLIPSIS = "&hellip;"

const prev = computed<number | null>(() =>
  current.value === 1 ? null : current.value - 1
)
const next = computed<number | null>(() =>
  current.value === props.max ? null : current.value + 1
)
const items = reactive<(number | string)[]>([1])

watch(current, () => paginate)
paginate()

function paginate() {
  items.splice(1)
  if (current.value === 1 && props.max === 1) return
  if (current.value > 4) items.push(ELLIPSIS)

  const r = props.nbToShow,
    rLeft = current.value - r,
    rRight = current.value + r

  for (let i = rLeft > r ? rLeft : r; i <= Math.min(props.max, rRight); i++)
    items.push(i)

  if (rRight + 1 < props.max) items.push(ELLIPSIS)
  if (rRight < props.max) items.push(props.max)
}

function checkAndUpdate(page: number | null) {
  if (page) current.value = page
  paginate()
}

function genRouteQuery(page: number) {
  if (!page) return router.currentRoute
  return { query: { ...router.currentRoute.value.query, page } }
}
</script>

<style scoped lang="sass"></style>
