import { computed, reactive, toRefs, unref, watch } from 'vue'

export function usePagination(props: any) {
  const paginationState = reactive(unref(props).pagination)
  toRefs(paginationState)

  const { pageNo, pageSize } = paginationState

  watch(
    () => unref(props).pagination,
    (pagination) => {
      pageNo.value = pagination.pageNo
      pageSize.value = pagination.pageSize
    },
  )

  const getPagination = computed(() => {
    return {
      pageNo: unref(pageNo),
      pageSize: unref(pageSize),
    }
  })

  function setPagination(pagination) {
    pageNo.value = pagination.pageNo
    pageSize.value = pagination.pageSize
  }

  function setPageSize(size: number) {
    pageSize.value = size
  }

  function setPageNo(size: number) {
    pageNo.value = size
  }

  return { getPagination, setPagination, setPageSize, setPageNo }
}
