<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  searchParameterDto: Object,
  listFunction: Function,
})

async function retrieveDataList(pageIndex) {
  props.listFunction(pageIndex)
}

async function retrievePreviousDataList() {
  if (props.searchParameterDto.page < 2) {
    return
  } else {
    retrieveDataList(--props.searchParameterDto.page)
  }
}

async function retrieveNextDataList() {
  const maxPage = Math.ceil(props.searchParameterDto.totalItemCount / props.searchParameterDto.itemCountPerPage)
  if (maxPage == 0 || props.searchParameterDto.page == maxPage) {
    return
  } else {
    retrieveDataList(++props.searchParameterDto.page)
  }
}
</script>

<template>
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
      <li class="page-item">
        <a class="page-link" @click.prevent="retrievePreviousDataList">Previous</a>
      </li>
      <li class="page-item" v-for="pageNo in props.searchParameterDto.pageList" :class="pageNo == props.searchParameterDto.page ? 'active' : ''" :aria-current="pageNo == props.searchParameterDto.page ? 'page' : ''">
        <a class="page-link" @click.prevent="retrieveDataList(pageNo)">{{ pageNo }}</a>
      </li>
      <li class="page-item">
        <a class="page-link" @click.prevent="retrieveNextDataList">Next</a>
      </li>
    </ul>
  </nav>
</template>

<style></style>
