<script setup lang="ts">
import type { Page, PageRequest } from '@/api/pagination'
import AppButton from '@/components/common/AppButton.vue'

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>
    <div v-if="page && page.totalElements > 0">
      <AppButton
        size="sm"
        icon="backward-step"
        :disabled="!page || page.isFirst"
        @click="updatePage(1)"
      />

      <AppButton
        size="sm"
        icon="chevron-left"
        :disabled="!page || page.isFirst"
        @click="incrementPage(-1)"
      />

      <span
        style="min-width: 100px; text-align: center; display: inline-block"
        class="font-size-xsmall"
      >
        Page <span class="font-bold">{{ page?.pageRequest.page }}</span> of {{ page?.totalPages }}
      </span>

      <AppButton
        size="sm"
        icon="chevron-right"
        :disabled="!page || page.isLast"
        @click="incrementPage(1)"
      />

      <AppButton
        size="sm"
        icon="forward-step"
        :disabled="!page || page.isLast"
        @click="updatePage(page?.totalPages ?? 0)"
      />
    </div>
  </div>
</template>
