<script setup lang="ts">
import type { Page, PageRequest } from '@/api/pagination';


const props = defineProps<{ page?: Page<unknown> }>()
const emit = defineEmits<{
  update: [pageRequest: PageRequest]
}>()

function updatePage(newPage: number) {
  if (!props.page) return
  emit('update', {
    page: newPage,
    size: props.page.pageRequest.size,
    sorts: props.page.pageRequest.sorts
  })
}

function incrementPage(step: number) {
  if (!props.page) return
  emit('update', {
    page: props.page.pageRequest.page + step,
    size: props.page.pageRequest.size,
    sorts: props.page.pageRequest.sorts
  })
}
</script>
<template>
  <div>
    <button :disabled="!page || page.isFirst" @click="updatePage(1)">
      First Page
    </button>

    <button :disabled="!page || page.isFirst" @click="incrementPage(-1)">
      Previous Page
    </button>

    <span>Page {{ page?.pageRequest.page }} / {{ page?.totalPages }}</span>

    <button :disabled="!page || page.isLast" @click="incrementPage(1)">
      Next Page
    </button>

    <button :disabled="!page || page.isLast" @click="updatePage(page?.totalPages ?? 0)">
      Last Page
    </button>
  </div>
</template>
