import { Button } from 'antd-mobile';
import React from 'react';
import { useState } from 'react';

export function useDataGrip(
  loadData: any,
  actions: Array<any>,
  condition: string,
) {
  const [pageNo, setPageNo] = useState(2);
  const [list, setList] = useState<any>({});
  const [visible, setVisible] = useState(false);
  /**
   * 加载更多
   */
  const loadMore = async () => {
    await loadData(condition, pageNo);
    setPageNo((pageNo) => pageNo + 1);
  };
  /**
   *
   * @param val 传入按钮数据展示
   * @returns
   */
  const getActions = (val: any): React.ReactNode[] => {
    if (actions) {
      if (actions.length === 1) {
        return [
          <></>,
          <></>,
          <Button
            size="mini"
            color="primary"
            fill="none"
            onClick={(e) => actions[0]?.callBack(val, e)}
            key={actions[0].name}
          >
            {actions[0].name}
          </Button>,
        ];
      } else if (actions.length === 2) {
        return [
          <></>,
          <div
            onClick={(e) => actions[1]?.callBack(val, e)}
            key={actions[1].name}
          >
            {actions[1].name}
          </div>,
          <div
            onClick={(e) => actions[0]?.callBack(val, e)}
            key={actions[0].name}
          >
            {actions[0].name}
          </div>,
        ];
      } else if (actions.length === 3) {
        return [
          <div
            onClick={(e) => actions[0]?.callBack(val, e)}
            key={actions[0].name}
          >
            {actions[0].name}
          </div>,
          <div
            key={actions[1].name}
            onClick={(e) => actions[1]?.callBack(val, e)}
          >
            {actions[1].name}
          </div>,
          <div
            key={actions[2].name}
            onClick={(e) => actions[2]?.callBack(val, e)}
          >
            {actions[2].name}
          </div>,
        ];
      } else {
        return [];
      }
    } else {
      return [];
    }
  };
  /**
   *
   * @param query 传入一个row数据展示详情
   */
  const showDetails = (query: any) => {
    setList(query);
    setVisible(true);
  };
  return {
    list,
    visible,
    pageNo,
    setVisible,
    loadMore,
    getActions,
    showDetails,
  };
}