/*
 * @Author: yangzonglong
 * @Date: 2021-07-22 16:45:05
 * @version: v1.0.0
 * @Descripttion: Loading
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-09-09 17:12:12
 * @Auditor: 
 */
import React, { useState, useEffect, useRef } from 'react';
import LoadingUI from './LoadingUI';
import style from './loading.module.scss';

const bgStyle: React.CSSProperties = {
  background: 'rgba(35, 37, 40, 0.45)'
}

interface MaskProps { isBg?: boolean };

const Mask = ({ isBg }: MaskProps) => {
  if(!isBg) return null;
  return <div className={style.mask} style={bgStyle}/>
};

interface LoadingProps {
  visible: boolean;
  hideMask?: boolean // 为true时 不显示mask
}

const Loading: React.FC<LoadingProps> = ({ visible, hideMask }) => {
  const timeout = useRef<number | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (timeout.current) {
      window.clearTimeout(timeout.current);
      timeout.current = null;
    }

    timeout.current = window.setTimeout(() => {
      setLoading(visible);
      timeout.current = null;
    }, 200)
  }, [visible]);

  return (
    <>
      {visible && <Mask />}
      {!hideMask && loading && <Mask isBg/>}
      {loading && <LoadingUI/>}
    </>
  )
}

export default Loading;