import type { ReactNode } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import { alert, isEmptyObject } from '@/common/common'

interface Params {
  children?: ReactNode
  query?: object
  fetchData: (data: object) => any
  change?: (data: any) => void
}
const InfiniteScrollPaging = (props: Params) => {
  const { query = {} } = props

  // 加载刷新数据
  const [refreshData, setRefreshData] = useState({
    refreshStatus: false,
    moreStatus: false,
    page: 1,
    size: 10,
    loading: false,
  })
  const refreshDataRef = useRef({})
  // 渲染（数据）
  const [data, setData] = useState({
    list: [],
    total: 0,
  })
  const getData = async(startStatus, endStatus) => {
    const tRefreshDataRef = refreshDataRef.current as any
    setRefreshData({
      ...tRefreshDataRef,
      ...startStatus,
      loading: true,
    })
    const result = await props.fetchData({
      ...query,
      page: tRefreshDataRef.page,
      size: tRefreshDataRef.size,
    })
    if (result.success) {
      // 返回数据
      props.change && props.change(result)
      if (result.data.total <= 0) {
        setRefreshData({
          ...tRefreshDataRef,
          ...endStatus,
          loading: false,
        })
      }
      else {
        setData({
          list: result.data.list,
          // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
          total: result.data.total,
        })
        setRefreshData({
          ...tRefreshDataRef,
          refreshStatus: false,
          moreStatus: false,
          loading: false,
        })
      }
    }
    else {
      alert.none(result.msg)
      setRefreshData({
        ...tRefreshDataRef,
        refreshStatus: false,
        moreStatus: true,
        loading: false,
      })
    }
  }
  const dataRef = useRef({})
  // 下拉刷新
  const handleRefresh = async() => {
    const tRefreshData = refreshDataRef.current as any
    setRefreshData({
      ...tRefreshData,
      page: 1,
      size: 10,
    })
    getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
  }
  // 加载更多
  const handleMoreLoad = async() => {
    const t = dataRef.current as any
    const tRefreshData = refreshDataRef.current as any
    if (t.list.length < t.total) {
      setRefreshData({
        ...tRefreshData,
        page: ++tRefreshData.page,
        size: ++tRefreshData.page * tRefreshData.size,
      })
      getData(
        {
          moreStatus: true,
        },
        {
          moreStatus: true,
        },
      )
    }
  }
  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: data.list, total: data.total, status: refreshData.loading })
  }, [refreshData.loading])
  useEffect(() => {
    refreshDataRef.current = refreshData
    dataRef.current = data
    getData({ moreStatus: true }, { moreStatus: true })
  }, [])
  useEffect(() => {
    if (!isEmptyObject(query)) {
      setData({ list: [], total: 0 })
      getData({ moreStatus: true }, { moreStatus: true })
    }
  }, [query])
  return (
    <InfiniteScroll
      refresherEnabled
      refresherTriggered={refreshData.refreshStatus}
      moreStatus={refreshData.moreStatus}
      selfOnRefresherRefresh={handleRefresh}
      selfonScrollToLower={handleMoreLoad}
      statusMore={statusMore}
    >
      {props.children}
    </InfiniteScroll>
  )
}

export default InfiniteScrollPaging