<template>
  <ul class="pagination" :class="{ 'pagination-sm': small, 'pagination-lg': large }">
    <li class="page-item" v-if="showFirst" :class="{ disabled: isFirstPage }">
      <a class="page-link" href="#" aria-label="First" @click="goToPage(1)">
        <span aria-hidden="true" v-html="firstLabel"></span>
      </a>
    </li>
    <li class="page-item" v-if="showPrevious" :class="{ disabled: !canGoPrev }">
      <a class="page-link" href="#" aria-label="Previous" @click="goToPage(modelValue - 1)">
        <span aria-hidden="true" v-html="prevLabel"></span>
      </a>
    </li>
    <li
      v-for="pageNum of pages"
      class="page-item"
      :class="{ active: pageNum === modelValue }"
      :disabled="pageNum === modelValue"
    >
      <a class="page-link" href="#" @click="goToPage(pageNum)">{{ pageNum }}</a>
    </li>
    <li class="page-item" v-if="showNext" :class="{ disabled: !canGoNext }">
      <a class="page-link" href="#" aria-label="Next" @click="goToPage(modelValue + 1)">
        <span aria-hidden="true" v-html="nextLabel"></span>
      </a>
    </li>
    <li class="page-item" v-if="showLast" :class="{ disabled: isLastPage }">
      <a class="page-link" href="#" aria-label="Last" @click="goToPage(totalPages)">
        <span aria-hidden="true" v-html="lastLabel"></span>
      </a>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  large: Boolean,
  small: Boolean,
  showPrevious: Boolean,
  showNext: Boolean,
  showFirst: Boolean,
  showLast: Boolean,
  prevLabel: {
    type: String,
    default: '&laquo;',
  },
  nextLabel: {
    type: String,
    default: '&raquo;',
  },
  firstLabel: {
    type: String,
    default: 'First',
  },
  lastLabel: {
    type: String,
    default: 'Last',
  },
  modelValue: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
});
const emit = defineEmits(['update:modelValue']);

const canGoPrev = computed(() => props.modelValue > 1);
const canGoNext = computed(() => props.modelValue < props.totalPages);
const isFirstPage = computed(() => props.modelValue === 1);
const isLastPage = computed(() => props.modelValue === props.totalPages);

// todo - determine which page buttons to show
const pages = computed(() => {
  const arr: number[] = [];
  for (let i = 0; i < props.totalPages; i++) {
    arr.push(i + 1);
  }
  return arr;
});

const goToPage = (num: number) => emit('update:modelValue', num);
</script>
