import React, { useEffect } from 'react';
import './index.css';
import hljs from 'highlight.js';
import '../../style/atom-one-dark.css';
const CodeValue = (props: any) => {


  const { className = 'java', children } = props;

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

    // 直接找到所有的 pre 标签
    const pres = document?.querySelectorAll<HTMLElement>('.codeValue')
    if (pres && pres.length > 0) {
      pres.forEach(el => {
        hljs.highlightElement(el)
      })
    }
  }, [children[0]]);
  return (
    <div data-start={props?.position?.start?.line ?? ''} data-end={props?.position?.end?.line ?? ''} data-page={props?.page ?? 0} className='scrollIcon copyCodeContain'>
      <pre className={className}>
        <code className="codeValue">{children[0]}</code>
      </pre>
    </div>
  );
};
export default CodeValue;