<script setup lang="ts">
import { h } from 'vue'
import { useI18n } from 'vue-i18n'

export interface PaginationInfo {
  pageNo: number
  pageSize: number
  totalPages: number
  totalRows: number
}

interface Props {
  pagingInfo: PaginationInfo
}

const { t } = useI18n()

const pageSizes = [
  {
    label: () => h('span', {}, '10 / ' + t('common_module.pagination_module.page_unit')),
    value: 10,
  },
  {
    label: () => h('span', {}, '20 / ' + t('common_module.pagination_module.page_unit')),
    value: 20,
  },
  {
    label: () => h('span', {}, '30 / ' + t('common_module.pagination_module.page_unit')),
    value: 30,
  },
  {
    label: () => h('span', {}, '40 / ' + t('common_module.pagination_module.page_unit')),
    value: 40,
  },
]

interface Emits {
  (e: 'update:pagingInfo', value: PaginationInfo): void
  (e: 'updatePageNo', value: number): void
  (e: 'updatePageSize', value: number): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

async function handleUpdatePageNo(pageNo: number) {
  emit('updatePageNo', pageNo)
}

async function handleUpdatePageSize(pageSize: number) {
  emit('updatePageSize', pageSize)
}
</script>

<template>
  <div class="flex items-center">
    <span class="text-[#999]">
      {{ t('common_module.pagination_module.total') }} {{ pagingInfo.totalRows }}
      {{ t('common_module.pagination_module.page_no') }}
    </span>

    <NPagination
      class="custom-pagination"
      :page="pagingInfo.pageNo"
      :page-count="pagingInfo.totalPages"
      :page-sizes="pageSizes"
      size="medium"
      show-quick-jumper
      show-size-picker
      :goto="() => h('span', {}, t('common_module.pagination_module.goto'))"
      @update:page="handleUpdatePageNo"
      @update:page-size="handleUpdatePageSize"
    />
    <span class="ml-[10px] text-[#999]">{{ t('common_module.pagination_module.page_size') }}</span>
  </div>
</template>

<style lang="scss" scoped>
:deep(.custom-pagination .n-base-selection) {
  width: 106px;
  border-radius: 5px;

  --n-border: 1px solid #ccc !important;
}

:deep(.custom-pagination .n-input__input-el),
:deep(.custom-pagination .n-base-selection-input__content) {
  color: #999;
}

:deep(.custom-pagination .n-input) {
  border-radius: 5px;

  --n-border: 1px solid #ccc !important;
}
</style>
