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


const validate = (props: any) => {

  const { className, children, ext } = props
  const [validateShow, setValidateShow] = useState(false)

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

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

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

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

    // 直接找到所有的 pre 标签
    const pres = document?.querySelectorAll('pre')
    if (pres && pres.length > 0) {
      pres.forEach(el => {
        hljs.highlightElement(el)
      })
    }
  }, [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`}>
      {ext &&
        <div className='allValiate'>
          <div className="noValidateValue" data-type={'valiate'} data-valiate-type={ext ?? ''} data-value={props.children ?? ''}></div>
        </div>
      }
      {!ext &&


        <>

          <span className='execSpan'><pre className={className}>
            <code className='valiateCode'>
              {children[0]}
            </code>
          </pre></span>
          {(experEnv === 'true' || modal === '1') && children[0] && <div className='actionIcon'>
            {
              validateShow ?
                <div className="validateValue" data-type={'valiate'} data-valiate-type={ext ?? ''} data-value={props.children ?? ''} onMouseEnter={() => setValidateShow(true)}
                  onMouseLeave={() => setValidateShow(false)}>


                  <img src={validateIconActive} className="validateValue1" data-type={'valiate'} data-valiate-type={ext ?? ''} data-value={props.children ?? ''} alt="" />
                  <div className='hoverTotip'>
                    检验
                  </div>
                  <div ></div>
                </div>

                : <div className="validateValue" data-type={'valiate'} data-valiate-type={ext ?? ''} data-value={props.children ?? ''} onMouseEnter={() => setValidateShow(true)}
                  onMouseLeave={() => setValidateShow(false)}><img src={validateIcon} alt="" /></div>
            }
          </div>}
        </>

      }


    </div>
  );
};

export default validate;