/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';

let timer = null;
const LoadBox = ({
  delay,
  indicator,
  size,
  tip,
  wrapperClassName,
  timeout,
  timeoutTip,
  spinning,
}) => {
  const [loadTip, setloadTip] = useState(tip);
  useEffect(() => {
    setloadTip(tip);
    if (timer) clearTimeout(timer);
    if (spinning)
      timer = setTimeout(() => {
        setloadTip(timeoutTip);
      }, timeout);
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [spinning]);
  return (
    <Spin
      delay={delay}
      spinning={spinning}
      indicator={indicator}
      size={size}
      tip={loadTip}
      wrapperClassName={wrapperClassName}
    ></Spin>
  );
};
LoadBox.defaultProps = {
  spinning: true,
  delay: 0,
  indicator: '',
  size: 'default',
  tip: '',
  wrapperClassName: '',
  timeout: 3000,
  timeoutTip: '正在加载数据,请耐心等待...',
};

LoadBox.propTypes = {
  spinning: PropTypes.bool, // 是否为加载中状态
  delay: PropTypes.number, // 延迟显示加载效果的时间(防止闪烁)
  indicator: PropTypes.node, // 加载指示符
  size: PropTypes.string, // 组件大小,可选值为 small default large
  tip: PropTypes.string, // 当作为包裹元素时,可以自定义描述文案
  wrapperClassName: PropTypes.string, // 包装器的类属性
  timeout: PropTypes.number, // 超时时间
  timeoutTip: PropTypes.string, // 超时时间提示
};

export default LoadBox;