import React, { useEffect, useState, useCallback } from 'react';
import { ListView, PullToRefresh, } from 'antd-mobile';
import LoadingComponent from './LoadingComponent';
import styles from './ListViewDiy.less';

const defaultPagination = {
  pageNo: 1,
  pageSize: 10,
  total: 1,
  hasNextPage: true,
}
// 函数式组件，有问题，不要用
//  封装的listView组件，展示分页后的数据，可以下拉刷新，滚动到底部请求数据，传递搜索条件刷新。
//  props:
//    request: 请求方法, params => promise 接受查询条件为参数，返回一个promise，promise.resolve()的值是接口返回的response
//    renderRow: ListView组件的renderRow,
//    searchValues: 搜索条件
//    mountedSearch: 页面加载后是否查询
//    ListSeparator: ListView组件的ListSeparator
const defaultListViewData = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row1 !== row2,
});
export default function TasksListComponent({ request, renderRow, searchValues, mountedSearch, ListSeparator }) {

  const [isLoading, toggleLoading] = useState(false);
  const [refreshing, toggleRefreshing] = useState(false);

  const [listViewData, setListViewData] = useState(defaultListViewData);
  const [dataSource, setDataSource] = useState([]); // 用数组保存数据，复制给listViewData
  const [pagination, setPagination] = useState(defaultPagination);

  const queryData = useCallback(
    (isRefresh = true) => {
      const { hasNextPage, pageSize, pageNo, } = pagination;

      if (isLoading) return;
      if (!isRefresh && !hasNextPage) return;

      toggleLoading(true);
      if (isRefresh) {
        setPagination(defaultPagination);
        toggleRefreshing(true);
      }

      const params = {
        pageNo,
        pageSize,
        ...searchValues,
      };
      request(params).then(res => {
        if (res) {
          const { rows, pageNo, pageSize, hasNextPage, } = res;
          const ds = isRefresh ? rows : dataSource.concat(rows);
          setDataSource(ds);
          setListViewData(listViewData.cloneWithRows(ds));
          setPagination({...pagination, pageNo, pageSize, hasNextPage, });
        }
      }).finally(() => {
        toggleLoading(false);
        toggleRefreshing(false);
      });
    }
  , [ pagination, searchValues ])

  useEffect(() => {

    queryData(true);
  }, [queryData, mountedSearch]);



  function onEndReached(event) {
    const { hasNextPage } = pagination;
    if (isLoading || !hasNextPage) {
      return;
    }
    setPagination({...pagination, pageNo: pagination.pageNo + 1});
  }

  const { pageSize } = pagination;
  return (
    <div className={styles.listWrapper}>
      <ListView
        dataSource={listViewData}
        renderFooter={() => <LoadingComponent isLoading={isLoading} /> }
        renderRow={(rowData, sectionID, rowID, highlightRow) => renderRow(
          rowData, sectionID, rowID, highlightRow, () => queryData(true)
        )}
        renderSeparator={ListSeparator}
        scrollRenderAheadDistance={500}
        pageSize={pageSize}
        onEndReached={onEndReached}
        onEndReachedThreshold={10}
        pullToRefresh={<PullToRefresh
          refreshing={refreshing}
          onRefresh={() => setPagination(defaultPagination)}
        />}
        style={{
          height: '100%',
          overflow: 'scroll',
        }}
      />
    </div>
  );
}

TasksListComponent.defaultProps = {
  ListSeparator: () => <></>,
}
