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 FlashPlayer: 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 == 2) {
      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(2, 'FlashPlayer安装成功！')
    onCancel()
  }

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

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

          {active != 2 && <div
            className={styles.f_p}
            onClick={() => {
              active == 1 ? setValue() : installSuccess()
            }}>
          </div>}

          {active == 2 &&
            <>
              <div className={styles.percentValVal}>{percentVal}</div>
              <div className={styles.progress} style={{background: 'rgba(0,1,1,0)', width: 511, height: 26, bottom: 235, left: 66}}>
              <Progress style={{left: 4, top: 4}} percent={percentVal} strokeLinecap="butt" size={[511, 26]} strokeColor={'rgba(96,156,212)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
              </div>
            </>}
        </div>
      </div>
    }
  </>
};

export default FlashPlayer;
