<script lang="ts" setup>
import { computed } from 'vue'
import DoubleChevronRight from '#adata-ui/icons/chevron/double-chevron-right.vue'

interface Props {
  lastPage: number
  disabled?: boolean
  amountOfShownPages?: number
  activeClasses?: string
  defaultClasses?: string
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  activeClasses: '',
  defaultClasses: '',
  amountOfShownPages: 3
})

const modelValue = defineModel<number>({ required: true })

const prevPage = computed(() => modelValue.value > 1)

const nextPage = computed(() => modelValue.value !== props.lastPage)

const showFirstPageIndex = computed(() => modelValue.value > 3)
</script>
<template>
  <div class="flex items-center justify-center">
    <ul
      v-if="lastPage > 1"
      :class="['flex items-center justify-center', { 'pointer-events-none': disabled }]"
    >
      <li
        v-if="showFirstPageIndex"
        :class="[
          defaultClasses,
          { 'bg-blue-700 text-white hover:bg-blue-900': modelValue === 1 },
          !!activeClasses && 1 === modelValue ? activeClasses : ''
        ]"
        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
        @click="modelValue = 1"
      >
        <double-chevron-right class="rotate-180 text-base" />
      </li>
      <li
        v-show="prevPage"
        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:text-white"
        @click="modelValue -= 1"
      >
        <a-icon-chevron-left />
      </li>

      <li
        v-for="page in [modelValue - 2, modelValue - 1].filter((n) => n > 0)"
        :key="page"
        :class="[
          defaultClasses,
          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
        ]"
        @click="modelValue = page"
      >
        {{ page }}
      </li>

      <li
        :class="[
          defaultClasses,
          'bg-blue-700 text-white hover:bg-blue-900',
          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition'
        ]"
      >
        {{ modelValue }}
      </li>

      <li
        v-for="(n, idx) in [modelValue + 1, modelValue + 2].filter((n) => n <= lastPage)"
        :key="idx"
        :class="[
          defaultClasses,
          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
        ]"
        @click="modelValue = n"
      >
        {{ n }}
      </li>

      <li
        v-show="nextPage"
        :class="{ disabled: disabled }"
        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
        @click="modelValue += 1"
      >
        <a-icon-chevron-right />
      </li>
      <li
        v-if="modelValue !== lastPage && lastPage > 3 && lastPage - modelValue >= 3"
        :class="[
          defaultClasses,
          { disabled: disabled },
          !!activeClasses && lastPage === modelValue ? activeClasses : ''
        ]"
        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
        @click="modelValue = lastPage"
      >
        <double-chevron-right class="text-base" />
      </li>
    </ul>
  </div>
</template>
