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 HGoogleEarth: FC<PageProps> = ({
  open = false,
  onCancel,
  setInstallExe
}) => {
  const [active, setActive] = useState(1);
  const [percentVal, setPercentVal] = useState(0);
  const [showOk, setShowOk] = useState(false);

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

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

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

          return newPercent;
        });
      }, 500);

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


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

  // 设置安装步骤进度
  const setValue = () => {
    setActive((e) => { return e + 1 })
  }

  return <>
    {
      open &&
      <div className={styles.modalOverlay}>
        <div className={styles.modal} style={{ width: 'auto', height: ' auto' }}>
          <img src={require(`../../../assets/images/googleEarth/${active}.jpg`)} />

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

          {active == 1 && <div className={styles.g_e} onClick={() => setValue()}></div>}

          {active == 2 && <>
            {showOk && <div className={styles.h_g_e} onClick={() => installSuccess()}>完成</div>}
            <div className={styles.progress} style={{ background: 'rgba(0,0,0,0)', right: 42, top: 90 }}>
              <Progress percent={percentVal} steps={50} size={[8, 17]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
            </div>
          </>}
        </div>
      </div>
    }
  </>
};

export default HGoogleEarth;
