import React, { PureComponent, Fragment } from "react";
import { apiUrl } from "@/utils/sldconfig.js";
import { emojiRegex } from "@/utils/regex";
import { message } from "antd";

export default class SldUEditor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.initEditor();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.getContentFlag && !this.props.getContentFlag) {
      let con = UE.getEditor(nextProps.id).getContent();
      this.props.getEditorContent(con);
    }
  }

  componentWillUnmount() {
    UE.delEditor(this.props.id);
  }

  initEditor = () => {
    const { id, initEditorContent } = this.props;
    console.info();
    const ueEditor = UE.getEditor(id, {
      serverUrl:
        `${apiUrl}v3/oss/ueditor/upload?configPath=config.json&storeId=` +
        localStorage.getItem("storeId"),
    });
    ueEditor.ready((editor) => {
      if (!editor) {
        UE.delEditor(id);
        this.initEditor();
      } else {
        if (initEditorContent) {
          UE.getEditor(id).setContent(initEditorContent);
        }

        // 监听输入内容变化
        ueEditor.addListener("contentChange", () => {
          const content = ueEditor.getContentTxt(); // 纯文本
          if (this.hasEmoji(content)) {
            message.warn("监测到输入表情符号，已自动去除");
            ueEditor.body.innerHTML = ueEditor.body.innerHTML.replace(
              emojiRegex,
              ""
            );
            ueEditor.focus();
            const range = ueEditor.selection.getRange();
            const body = ueEditor.body;

            // 找到最后一个文本节点或者元素节点
            let lastNode = body.lastChild;

            // 如果最后一个是元素节点，尝试找到它的最后一个文本节点
            function getLastTextNode(node) {
              if (node.nodeType === 3) return node; // 文本节点
              if (!node.hasChildNodes()) return null;
              return getLastTextNode(node.lastChild);
            }

            const lastTextNode = getLastTextNode(lastNode) || lastNode;

            // 如果找到文本节点，光标放在文本末尾
            if (lastTextNode && lastTextNode.nodeType === 3) {
              range.setStart(lastTextNode, lastTextNode.nodeValue.length);
            } else {
              // 否则放在最后元素后面
              range.setStartAfter(lastNode);
            }

            range.collapse(true);
            range.select();
          }
        });
      }
    });
  };

  hasEmoji = (str) => {
    return emojiRegex.test(str);
  };

  render() {
    const { id } = this.props;
    return <div id={id} name="content" type="text/plain" />;
  }
}