"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
var _slateConvert = require("../../slate-convert");
const NormalEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  let {
    enableEdit,
    handelEnableEdit,
    lang,
    headerName,
    value: propsValue,
    autoSave = true,
    saveDelay = 60000,
    isCheckBrowser = false,
    isImageUploadOnly = true,
    isSupportMultipleFiles = false,
    autoFocus,
    editorApi,
    onSaveEditorValue,
    onEditorValueChanged
  } = _ref;
  const editorContainerRef = (0, _react.useRef)(null);
  const editorRef = (0, _react.useRef)(null);
  const [style, setStyle] = (0, _react.useState)({});
  const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
  const valueRef = (0, _react.useRef)(typeof propsValue === 'string' ? {
    text: propsValue
  } : propsValue);
  const valueChangedRef = (0, _react.useRef)(false);
  const saveValue = (0, _react.useCallback)(function (value) {
    let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    valueChangedRef.current = true;
    onEditorValueChanged && onEditorValueChanged(value);
    if (!save) return;
    onSaveEditorValue && onSaveEditorValue(value);
    valueChangedRef.current = false;
  }, [onSaveEditorValue, onEditorValueChanged]);
  const handelAutoSave = (0, _react.useCallback)(() => {
    if (!valueChangedRef.current) return;
    saveValue(valueRef.current, true);
  }, [saveValue]);
  const onContentChanged = (0, _react.useCallback)(content => {
    const {
      previewText: preview,
      images,
      links,
      checklist
    } = (0, _getPreviewContent.default)(content, false);
    valueRef.current = {
      text: (0, _slateConvert.slateToMdString)(content),
      preview,
      images,
      links,
      checklist
    };
    saveValue(valueRef.current);
  }, [saveValue]);
  const openEditorDialog = (0, _react.useCallback)(() => {
    const {
      height
    } = editorContainerRef.current.getBoundingClientRect();
    setStyle({
      height
    });
    setShowExpandEditor(true);
  }, [editorContainerRef]);
  const onCloseEditorDialog = (0, _react.useCallback)(value => {
    if (value) {
      valueRef.current = value;
      saveValue(value, true);
    }
    setStyle({});
    setShowExpandEditor(false);
  }, [saveValue]);
  (0, _react.useEffect)(() => {
    let timer = null;
    if (autoSave) {
      timer = setTimeout(() => {
        handelAutoSave();
      }, saveDelay);
    }
    return () => {
      timer && clearTimeout(timer);
    };
  }, [autoSave, saveDelay, handelAutoSave]);
  (0, _react.useImperativeHandle)(ref, () => {
    return {
      getEditor: () => {
        var _editorRef$current, _editorRef$current2;
        const editor = ((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getEditor) && ((_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getEditor());
        return editor || null;
      }
    };
  }, [editorRef]);
  if (!enableEdit && !valueRef.current.text) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)('sf-long-text-inline-editor-container', {
        'preview': !enableEdit
      }),
      ref: editorContainerRef,
      onClick: handelEnableEdit
    });
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('sf-long-text-inline-editor-container', {
      'preview': !enableEdit
    }),
    style: style,
    ref: editorContainerRef
  }, !showExpandEditor ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
    ref: editorRef,
    enableEdit: enableEdit,
    isInline: true,
    autoFocus: autoFocus,
    isImageUploadOnly: isImageUploadOnly,
    isSupportMultipleFiles: isSupportMultipleFiles,
    value: valueRef.current.text,
    handelEnableEdit: handelEnableEdit,
    onSave: handelAutoSave,
    editorApi: editorApi,
    onContentChanged: onContentChanged,
    onExpandEditorToggle: openEditorDialog
  }) : /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-simple-slate-editor-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-editor-toolbar"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-slate-editor-content"
  }, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
    value: valueRef.current.text,
    isShowOutline: false
  })))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
    lang: lang,
    readOnly: false,
    isImageUploadOnly: isImageUploadOnly,
    isSupportMultipleFiles: isSupportMultipleFiles,
    headerName: headerName,
    value: valueRef.current.text,
    autoSave: autoSave,
    saveDelay: saveDelay,
    isCheckBrowser: isCheckBrowser,
    editorApi: editorApi,
    onSaveEditorValue: saveValue,
    onEditorValueChanged: saveValue,
    onCloseEditorDialog: onCloseEditorDialog
  }));
});
var _default = exports.default = NormalEditor;