import { FC, useEffect, useState } from 'react';
import styles from './index.less';
import { Progress } from 'antd';

interface PageProps {
  show?: boolean;
  onoK: () => void;
}

const ImportProgress: FC<PageProps> = ({
  show = false,
  onoK,
  ...props
}) => {
  const [percentVal, setPercentVal] = useState(0);

  // 监听是否到安装进度条步骤
  useEffect(() => {
    if (show) {
      const interval = setInterval(() => {
        setPercentVal((val) => {
          const randomStep = Math.round(Math.random() * (100 / 15));
          const newPercent = val + randomStep;

          if (newPercent >= 100) {
            clearInterval(interval);
            onoK()
            return 100;
          }

          return newPercent;
        });
      }, 100);

      return () => clearInterval(interval);
    }
  }, [show])


  return (
    <div className={styles.import_progress}>
      <div className={styles.progress}>
        <Progress percent={percentVal} steps={31} size={[8, 18]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
      </div>
    </div>
  )
}

export default ImportProgress