import React, { useEffect, useState } from 'react';
import './index.css';
import hljs from 'highlight.js';
import '../../style/atom-one-dark.css';
import execIcon from '../../assets/execIcon.svg';
import execIconActive from '../../assets/execIconActive.svg';
import execIconNo from '../../assets/execIconNo.svg';
import validateIcon from '../../assets/validateIcon.svg';
import validateIconActive from '../../assets/validateIconActive.svg';
import validateIconNo from '../../assets/validateIconNo.svg';
import copyIcon from '../../assets/copyIcon.svg';
import copyIconActive from '../../assets/copyIconActive.svg';

const allActive = (props: any) => {

  const [copyShow, setCopyShow] = useState(false)
  const [iconShow, setIconShow] = useState(true)
  const [execShow, setExecShow] = useState(false)
  const [validateShow, setValidateShow] = useState(false)


  //类型
  const [modal, setModal] = useState('')

  //环境
  const [experEnv, setExperEnv] = useState('')


  const copeValue = () => {
    let Url = props?.children

    let oInput = document.createElement('input');
    oInput.value = Url ?? '';
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display = 'none';
  }

  useEffect(() => {
    const codes = document?.querySelectorAll<HTMLElement>('.allActiveCode')
    hljs.configure({
      // 忽略警告
      ignoreUnescapedHTML: true
    })
    if (codes && codes.length > 0) {
      codes.forEach(el => {
        // 让每个 code 内容实现代码高亮
        hljs.highlightElement(el)
      })
      return
    }

    // 直接找到所有的 pre 标签
    const pres = document?.querySelectorAll<HTMLElement>('.allActiveCode')
    if (pres && pres.length > 0) {
      pres.forEach(el => {
        hljs.highlightElement(el)
      })
    }
  }, [props?.children]);

  //判断是否存在环境 与是否处于学习
  useEffect(() => {
    if (window.localStorage.getItem('template')) {
      setExperEnv(window.localStorage.getItem('template') || '')
    }
  }, [window.localStorage.getItem('template')])

  useEffect(() => {
    if (window.localStorage.getItem('modal')) {
      setModal(window.localStorage.getItem('modal') || '')
    }
  }, [window.localStorage.getItem('modal')])

  return (
    <div id={props?.id ?? ''} data-start={props?.position?.start?.line ?? ''} data-end={props?.position?.end?.line ?? ''} data-page={props?.page ?? 0} className={`scrollIcon copyCodeContain`}>
      <div className='execSpan'><pre className={props?.className || 'java'}>
        <code className='allActiveCode'>
          {props?.children[0]}
        </code>
      </pre></div>
      {props?.children[0] && <div className='actionIcon'>
        {copyShow ? <span className="extvalue" data-type={'copy'} data-value={props?.ext ?? props?.children} onClick={copeValue}
          onMouseEnter={() => setCopyShow(true)}
          onMouseLeave={() => setCopyShow(false)}
        >
          <img className="extvalue1" data-type={'copy'} data-value={props?.ext ?? props?.children} src={copyIconActive} alt="" />
          <div className='hoverTotip'>
            复制
          </div>
        </span> : <span className="extvalue" data-type={'copy'} data-value={props?.ext ?? props?.children} onClick={copeValue}
          onMouseEnter={() => setCopyShow(true)}
          onMouseLeave={() => setCopyShow(false)}
        >
          <img src={copyIcon} alt="" />
        </span>}
        {(experEnv === 'true' || modal === '1') &&
          (//首先判断是否为禁用  在判断是否为Hover
            (iconShow || !props?.ext) ? execShow ? <span className="extvalue" data-type={'exec'} data-value={props?.children ?? ''} onClick={() => {
              setIconShow(!iconShow)
              setValidateShow(false)
            }} onMouseEnter={() => setExecShow(true)}
              onMouseLeave={() => setExecShow(false)}>
              <img src={execIconActive} className="extvalue1" data-type={'exec'} data-value={props?.children ?? ''} style={{
                width: '16px', height: '16px'
              }} alt="" />
              <div className='hoverTotip'>
                执行
              </div>
            </span> : <span className="extvalue" data-type={'exec'} data-value={props?.children ?? ''} onClick={() => {
              setIconShow(!iconShow)
            }} onMouseEnter={() => setExecShow(true)}
              onMouseLeave={() => setExecShow(false)}>
              <img src={execIcon} style={{
                width: '16px', height: '16px'
              }} alt="" />
            </span> :
              <span className="extvalue" style={{
                cursor: 'not-allowed'
              }}> <img src={execIconNo} alt="" /></span>)
        }
        {
          (experEnv === 'true' || modal === '1') && (// 先判断是否存在
            props?.ext && (
              !iconShow ? validateShow ? <span className="validateValue" data-type={'valiate'} data-valiate-type={props?.ext ?? ''} data-value={''} onClick={() => {
                setIconShow(!iconShow)
                setValidateShow(false)
                setExecShow(false)
              }}
                onMouseEnter={() => setValidateShow(true)}
                onMouseLeave={() => setValidateShow(false)}
              ><img src={validateIconActive} className="validateValue1" data-type={'valiate'} data-valiate-type={props?.ext ?? ''} data-value={''} alt="" style={{
                width: '16px', height: '16px'
              }} />
                <div className='hoverTotip'>
                  校验
                </div>
              </span> : <div className="validateValue" data-type={'valiate'} data-valiate-type={props?.ext ?? ''} data-value={''} onClick={() => {
                setIconShow(!iconShow)
              }}
                onMouseEnter={() => setValidateShow(true)}
                onMouseLeave={() => setValidateShow(false)}
              ><img src={validateIcon} alt="" style={{
                width: '16px', height: '16px'
              }} /></div> :
                <div className="validateValue"
                  style={{
                    cursor: 'not-allowed'
                  }}
                ><img src={validateIconNo} alt="" /></div>
            )
          )
        }
      </div>}
    </div >
  );
};

export default allActive;

