import { ComputedRef, isRef, Ref, ref, shallowRef, watchEffect } from 'vue-demi'
import { usePagination, PaginationReq, PaginationRes } from './pagination'
import { DebounceOptions, wrapperDebouncePromiseFn } from '../utils/debounce'

const wait = (minTimeWait: number) => new Promise<void>(resolve => setTimeout(resolve, minTimeWait))

export function useLoading () {
  const loading = ref(false)
  function wrapperLoadingPromise<T> (p: Promise<T>): Promise<T> {
    loading.value = true
    Promise.all([p, wait(500)]).finally(() => {
      loading.value = false
    })
    return p
  }

  function wrapperLoadingPromiseFn<T, U extends Array<unknown>> (func: (...rest: U) => Promise<T>) {
    return (...rest: U) => {
      return wrapperLoadingPromise(func(...rest))
    }
  }

  function wrapperDebounceLoadingPromiseFn<T, U extends Array<unknown>> (func: (...rest: U) => Promise<T>, timer?: number, options?: DebounceOptions) {
    const loadingFn = wrapperLoadingPromiseFn(func)
    const debounceLoadingFn = wrapperDebouncePromiseFn(loadingFn, timer, options)
    return (...rest: U) => {
      return debounceLoadingFn(...rest)
    }
  }

  return {
    loading,
    wrapperLoadingPromise,
    wrapperLoadingPromiseFn,
    wrapperDebounceLoadingPromiseFn
  }
}

export function useDebounceLoadingPagination<T extends object, U> (func : (params: PaginationReq<T>) => Promise<PaginationRes<U>>, search: T|ComputedRef<T>|Ref<T>, size = 50, options?:{ timer?:number, isAutoWatch?:boolean } & DebounceOptions) {
  const { timer = 500, isAutoWatch = false } = options ?? {}

  const list = shallowRef<U[]>([])
  const { pagination, pages, wrapperPagePromiseFn } = usePagination(size)
  const { loading, wrapperDebounceLoadingPromiseFn } = useLoading()

  const requestApi = wrapperPagePromiseFn(func)
  const debounceQueryApi = wrapperDebounceLoadingPromiseFn(async (params: T, page?: number) => {
    pagination.currenPage = page ?? 1
    const data = await requestApi(params)
    list.value = data
  }, timer, options)

  const queryList = (page = 1) => {
    const query = isRef(search) ? search.value : { ...(search) }
    debounceQueryApi(query, page)
  }

  if (isAutoWatch) {
    watchEffect(() => {
      queryList()
    })
  }

  function changePage (page: number) {
    queryList(page)
  }

  return {
    list, pagination, pages, loading, queryList, changePage
  }
}