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

interface PageProps {
  open: boolean;
  onCancel: (name?: string) => void;
  setInstallExe: (index: number, text: string) => void;
}

const Net: FC<PageProps> = ({
  open = false,
  onCancel,
  setInstallExe
}) => {
  const [active, setActive] = useState(1);
  const [percentVal, setPercentVal] = useState(0);

  useEffect(() => {
    if (open) setActive(1)
  }, [open])

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

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

          return newPercent;
        });
      }, 500);

      return () => clearInterval(interval);
    }
  }, [active])
  
  // 设置安装步骤进度
  const setValue = () => {
    setActive((e) => { return e + 1 })
  }

  // 安装完成后 记录安装的信息
  const installSuccess = () => {
    setInstallExe(4, 'Net安装成功！')
    onCancel()
  }

  return <>
    {
      open &&
      <div className={styles.modalOverlay}>
        <div className={styles.modal} style={{width: 500, height: 460}}>
          <img src={require(`../../../assets/images/net/${active}.png`)} width={500} height={460} />

          <div className={styles.close} onClick={()=>{
            onCancel('.NET 2.0')
            }}></div>

          {[1,2].includes(active)  && <div 
            className={styles.net} 
            onClick={() => setValue()}>
          </div>}

          {active == 3 && <div className={styles.progress} style={{background: '#fff', height: 15, width: 375, bottom: 222, left: 33,}}>
            <Progress percent={percentVal} steps={42} size={[7, 14]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
          </div>}

          {active == 4  && <div 
            className={styles.net} 
            style={{bottom: 17, right: 27}}
            onClick={() => installSuccess()}>
          </div>}
        </div>
      </div>
    }
  </>
};

export default Net;
