"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 = LongTextEditorDialog;
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 _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
var _components = require("../../components");
var _slateConvert = require("../../slate-convert");
var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
require("./style.css");
function LongTextEditorDialog(_ref) {
  let {
    lang,
    readOnly,
    headerName,
    value,
    autoSave = true,
    saveDelay = 60000,
    focusEnd = false,
    isCheckBrowser = false,
    mathJaxSource,
    className,
    editorApi,
    onSaveEditorValue,
    onEditorValueChanged,
    onCloseEditorDialog,
    onLinkClick
  } = _ref;
  const editorRef = (0, _react.useRef)(null);
  const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
  const [dialogStyle, setDialogStyle] = (0, _react.useState)({});
  const onUpdateEditorValue = (0, _react.useCallback)(() => {
    var _editorRef$current, _editorRef$current2;
    if (!isValueChanged || readOnly) return;
    const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
    const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
    const {
      previewText,
      images,
      links,
      checklist
    } = (0, _getPreviewContent.default)(slateNodes, false);
    onSaveEditorValue({
      text: markdownString,
      preview: previewText,
      images: images,
      links: links,
      checklist
    });
    setValueChanged(false);
  }, [isValueChanged, onSaveEditorValue, readOnly]);
  const onCloseToggle = (0, _react.useCallback)(() => {
    let value = null;
    if (!readOnly && isValueChanged) {
      var _editorRef$current3, _editorRef$current4;
      const markdownString = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.getValue();
      const slateNodes = (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.getSlateValue();
      const {
        previewText,
        images,
        links,
        checklist
      } = (0, _getPreviewContent.default)(slateNodes, false);
      value = {
        text: markdownString,
        preview: previewText,
        images: images,
        links: links,
        checklist
      };
    }
    onCloseEditorDialog(value);
  }, [isValueChanged, onCloseEditorDialog, readOnly]);
  const onHotKey = (0, _react.useCallback)(event => {
    if (event.keyCode === 27) {
      event.stopPropagation();
      event.preventDefault();
      onCloseToggle();
    }
  }, [onCloseToggle]);
  (0, _react.useEffect)(() => {
    let timer = null;
    if (autoSave) {
      timer = setTimeout(() => {
        onUpdateEditorValue();
      }, saveDelay);
    }
    document.addEventListener('keydown', onHotKey);
    return () => {
      clearTimeout(timer);
      document.removeEventListener('keydown', onHotKey);
    };
  }, [autoSave, saveDelay, onUpdateEditorValue, onHotKey]);
  const {
    isValidBrowser,
    isWindowsWechat
  } = (0, _react.useMemo)(() => {
    return (0, _getBrowserInfo.default)(isCheckBrowser);
  }, [isCheckBrowser]);
  const onFullScreenToggle = (0, _react.useCallback)(() => {
    let containerStyle = {};
    if (!isFullScreen) {
      containerStyle = {
        width: '100%',
        height: '100%',
        top: 0,
        border: 'none'
      };
    }
    setIsFullScreen(!isFullScreen);
    setDialogStyle(containerStyle);
  }, [isFullScreen]);
  const onContentChanged = (0, _react.useCallback)(newContent => {
    // update parent's component cache value
    if (typeof onEditorValueChanged === 'function') {
      const {
        previewText: preview,
        images,
        links,
        checklist
      } = (0, _getPreviewContent.default)(newContent, false);
      onEditorValueChanged({
        text: (0, _slateConvert.slateToMdString)(newContent),
        preview,
        images,
        links,
        checklist
      });
    }
    setValueChanged(true);
  }, [onEditorValueChanged]);
  const onContainerKeyDown = event => {
    event.stopPropagation();
    onHotKey(event);
  };
  const headerClass = (0, _classnames.default)('longtext-header-container', {
    'longtext-header-container-border': readOnly || isWindowsWechat
  });
  const contentClass = (0, _classnames.default)('longtext-content-container', {
    'longtext-container-scroll': readOnly || isWindowsWechat
  });
  return /*#__PURE__*/_react.default.createElement(_components.LongTextModal, {
    onModalClick: onCloseToggle,
    containerClass: className
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: dialogStyle,
    className: "longtext-dialog-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: headerClass
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "longtext-header"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "longtext-header-name"
  }, headerName), /*#__PURE__*/_react.default.createElement("div", {
    className: "longtext-header-tool"
  }, /*#__PURE__*/_react.default.createElement("span", {
    onClick: onFullScreenToggle,
    className: `longtext-header-tool-item mr-1 iconfont icon-full-screen ${isFullScreen ? 'long-text-full-screen' : ''}`
  }), /*#__PURE__*/_react.default.createElement("span", {
    onClick: onCloseToggle,
    className: "longtext-header-tool-item iconfont icon-x"
  }))), !isValidBrowser && /*#__PURE__*/_react.default.createElement(_components.BrowserTip, {
    lang: lang,
    isWindowsWechat: isWindowsWechat
  })), /*#__PURE__*/_react.default.createElement("div", {
    onKeyDown: onContainerKeyDown,
    className: contentClass
  }, !readOnly && !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
    ref: editorRef,
    value: value,
    focusEnd: focusEnd,
    editorApi: editorApi,
    mathJaxSource: mathJaxSource,
    onContentChanged: onContentChanged,
    onLinkClick: onLinkClick
  }), (readOnly || isWindowsWechat) && /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
    isWindowsWechat: isWindowsWechat,
    value: value,
    mathJaxSource: mathJaxSource,
    isShowOutline: false
  }))));
}