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';

const exec = (props: any) => {


  //判断那个按钮显示
  const [iconShow, setIconShow] = useState(true)
  const [execShow, setExecShow] = useState(false)
  const [validateShow, setValidateShow] = useState(false)

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

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

  useEffect(() => {
    const codes = document?.querySelectorAll<HTMLElement>('.execCode')

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

    // 直接找到所有的 pre 标签
    const pres = document?.querySelectorAll<HTMLElement>('.execCode')
    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?.className ?? ''} data-start={props?.position?.start?.line ?? ''} data-end={props?.position?.end?.line ?? ''} data-page={props?.page ?? 0} className={`scrollIcon copyCodeContain`}>
      <span className='execSpan'><pre className={props?.className}>
        <code className='execCode'>
          {props?.children[0]}
        </code>
      </pre></span>
      {(experEnv === 'true' || modal === '1') && props?.children[0] && <div className='actionIcon'>
        {
          //首先判断是否为禁用  在判断是否为Hover
          (iconShow || !props?.ext) ? execShow ? <span className="extvalue" onClick={() => {
            setIconShow(!iconShow)
            setValidateShow(false)

          }} onMouseEnter={() => setExecShow(true)}
            onMouseLeave={() => setExecShow(false)}>
            <img src={execIconActive} className="extvalue1" data-type={'exec'} data-value={props?.children ?? ''} alt="" style={{
              width: '16px', height: '16px'
            }} />
            <div className='hoverTotip'>
              执行
            </div>
          </span> : <span className="extvalue" onClick={() => {
            setIconShow(!iconShow)
          }} onMouseEnter={() => setExecShow(true)}
            onMouseLeave={() => setExecShow(false)}>
            <img src={execIcon} alt="" style={{
              width: '16px', height: '16px'
            }} />
          </span> :
            <span className="extvalue" style={{
              cursor: 'not-allowed'
            }}> <img src={execIconNo} alt="" /></span>
        }
        {
          // 先判断是否存在
          props?.ext && (
            !iconShow ? validateShow ? <span className="validateValue" 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" 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 exec;