import type { AxiosResponse } from 'axios'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { Pagination, PaginationModel } from '@/model/rootObject'
import type { PaginationRequestBase } from '@/apis/requestType'

export const usePagination = <Q extends PaginationRequestBase, T>(
  AxiosRequest: (query: Q) => Promise<AxiosResponse<PaginationModel<T>, any>>,
  queryOptions: Parameters<typeof AxiosRequest>[0]
) => {
  const state = reactive({
    fetchingError: false,
    fetching: true,
    list: [] as T[],
    pagination: { current: queryOptions.current || 1, pages: NaN, total: NaN, size: queryOptions.size || 10 } as Pagination
  })

  const fetchList = async () => {
    // @ts-ignore
    delete queryOptions.current
    // @ts-ignore
    delete queryOptions.size

    AxiosRequest({
      ...queryOptions,
      current: state.pagination.current,
      size: state.pagination.size
    })
      .then((res) => {
        state.list = res.data.data.records as typeof state.list

        state.pagination.current = res.data.data.current
        state.pagination.pages = res.data.data.pages
        state.pagination.total = res.data.data.total
        state.pagination.size = res.data.data.size
        state.fetchingError = false
      })
      .catch((err) => {
        state.fetchingError = true
        ElMessage.error(err.message)
      })
      .finally(() => {
        state.fetching = false
      })
  }

  const handlePageSizeChange = (val: number) => {
    state.pagination.size = val
    fetchList()
  }

  const handlePageCurrentChange = (val: number) => {
    state.pagination.current = val
    fetchList()
  }

  const handlePagePrevClick = () => {
    state.pagination.current--
    state.pagination.current = Math.max(state.pagination.current, 0)
    fetchList()
  }

  const handlePageNextClick = () => {
    state.pagination.current++
    state.pagination.current = Math.min(state.pagination.current, state.pagination.pages)
    fetchList()
  }

  return { state, methods: { fetchList, handlePageSizeChange, handlePageCurrentChange, handlePagePrevClick, handlePageNextClick } }
}