import React, { useEffect, useRef, useCallback } from 'react';
// import { transform2Tag, setCursorAtLast } from '../utils';
import "./index.less";
var Editor = function Editor(props) {
  var value = props.value,
    placeholder = props.placeholder,
    autoFocus = props.autoFocus,
    onlyPasteText = props.onlyPasteText,
    onKeyDown = props.onKeyDown,
    onInput = props.onInput,
    setEditorFn = props.setEditorFn;
  var editorRef = useRef(null);
  var _onInput = function _onInput(e) {
    var _e$target = e.target,
      innerHTML = _e$target.innerHTML,
      innerText = _e$target.innerText;

    // 由于safari浏览器不支持零宽断言，所以暂时将自动匹配标签的功能去掉
    // const [hasTag, newHtml] = transform2Tag(innerHTML);

    // 如果用户输入的内容命中了标签的规则，则替换成标签
    // if (hasTag) {
    //     innerHTML = newHtml;
    //     // @ts-ignore
    //     editorRef.current.innerHTML = innerHTML;
    //     setCursorAtLast(editorRef.current);
    // }

    onInput === null || onInput === void 0 ? void 0 : onInput({
      html: innerHTML,
      text: innerText
    });
  };

  // 粘贴(去除样式，仅粘贴文本)
  var onPaste = function onPaste(e) {
    if (onlyPasteText) {
      e.preventDefault();
      var pastedText = e.clipboardData.getData('text/plain');
      document.execCommand('insertText', false, pastedText);
    }
  };

  // 记录光标对象
  var lastEditRange = useRef();
  var recordLastEditRange = function recordLastEditRange() {
    var selection = getSelection();
    if (!selection) return;
    lastEditRange.current = selection.getRangeAt(0);
  };

  // 插入节点(评论框组件会记录最后光标的点击位置，然后在光标位置处插入内容)
  var insertHtml = useCallback(function (value, options) {
    var _editorRef$current2, _editorRef$current3;
    var selection = getSelection(); // 获取文本选定对象 https://developer.mozilla.org/zh-CN/docs/Web/API/Selection
    if (!selection) return;
    var _ref = options || {},
      className = _ref.className,
      contentEditable = _ref.contentEditable;
    var insertNode = document.createElement('span');
    insertNode.innerHTML = value;
    insertNode.className = className ? "insertHtml ".concat(className) : 'insertHtml';
    insertNode.setAttribute('contentEditable', contentEditable ? 'true' : 'false');

    // 判断是否有最后光标对象存在，若存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
    if (lastEditRange.current) {
      selection.removeAllRanges();
      selection.addRange(lastEditRange.current);
    } else {
      var _editorRef$current;
      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
    }
    var range = selection.getRangeAt(0); // 获取光标对象
    range.insertNode(insertNode); // 插入节点
    range.setStartAfter(insertNode); // 以插入的节点为基准，重新设置光标的起始位置
    range.collapse(true); // 使光标开始和光标结束位置重叠
    selection.removeAllRanges(); // 清除选定对象的所有光标对象
    selection.addRange(range); // 插入新的光标对象

    lastEditRange.current = selection.getRangeAt(0); // 记录最后光标对象
    onInput === null || onInput === void 0 ? void 0 : onInput({
      html: ((_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.innerHTML) || '',
      text: ((_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.innerText) || ''
    });
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []);

  // 清空输入框内容
  var cleanContent = useCallback(function () {
    if (editorRef.current) {
      editorRef.current.innerHTML = '';
      onInput === null || onInput === void 0 ? void 0 : onInput({
        html: '',
        text: ''
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(function () {
    // 自动获取焦点，加定时器保证组件节点加载完成后再操作dom
    if (autoFocus) {
      setTimeout(function () {
        var _editorRef$current4;
        (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.focus();
      });
    }

    // 暴露评论框内部动态插入内容方法
    setEditorFn({
      insertHtml: insertHtml,
      cleanContent: cleanContent
    });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(function () {
    value && insertHtml(value);
  }, [value, insertHtml]);
  return /*#__PURE__*/React.createElement("div", {
    className: "comment-editor",
    ref: editorRef,
    contentEditable: true,
    placeholder: placeholder,
    onBlur: recordLastEditRange,
    onInput: _onInput,
    onPaste: onPaste,
    onKeyDown: onKeyDown
  });
};
export default Editor;