<script setup lang="ts">
import 'tui-pagination.css';
import Pagination from 'tui-pagination/dist/tui-pagination';
import type { PaginationType } from '~/types/data/pagination';

const instance = ref();
const paginationRef = ref();
const props = defineProps<PaginationType>();
const emit = defineEmits(['change']);

onMounted(() => {
  instance.value = new Pagination(paginationRef.value, {
    totalItems: props.totalItems,
    itemPerPage: props.itemsPerPage,
    visiblePages: props.visiblePages ?? 10,
    centerAlign: props.centerAlign ?? false,
    usageStatistics: false
  });

  instance.value.on('beforeMove', (data: any) => {
    emit('change', data.page);
  });
});

watch(
  () => props,
  (newValue) => {
    instance.value.setItemsPerPage(newValue.itemsPerPage);
    instance.value.setTotalItems(newValue.itemsPerPage);
  },
  {
    deep: true
  }
);
</script>

<template>
  <div ref="paginationRef" class="tui-pagination"></div>
</template>

<style scoped></style>
