"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 = EmailEditorDialog;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
var _components = require("../../components");
var _seatableEditor = _interopRequireDefault(require("../seatable-editor"));
require("../longtext-editor-dialog/style.css");
function EmailEditorDialog(_ref) {
  let {
    lang,
    readOnly = false,
    headerName,
    value,
    columns,
    autoSave = false,
    saveDelay = 60000,
    isCheckBrowser = false,
    editorApi,
    onSaveEditorValue,
    onEditorValueChanged,
    onCloseEditorDialog
  } = _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;
    if (!isValueChanged || readOnly) return;
    const slateNodes = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getSlateValue();
    onSaveEditorValue(slateNodes);
    setValueChanged(false);
  }, [isValueChanged, onSaveEditorValue, readOnly]);
  const onCloseToggle = (0, _react.useCallback)(() => {
    let value = null;
    if (!readOnly && isValueChanged) {
      var _editorRef$current2;
      const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
      value = slateNodes;
    }
    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)(() => {
    // delay to update editor's content
    setTimeout(() => {
      // update parent's component cache value
      if (onEditorValueChanged && typeof onEditorValueChanged === 'function') {
        var _editorRef$current3;
        const slateNodes = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.getSlateValue();
        onEditorValueChanged(slateNodes);
      }
      setValueChanged(true);
    }, 0);
  }, [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
  }, /*#__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 dtable-font dtable-icon-full-screen ${isFullScreen ? 'long-text-full-screen' : ''}`
  }), /*#__PURE__*/_react.default.createElement("span", {
    onClick: onCloseToggle,
    className: "longtext-header-tool-item dtable-font dtable-icon-x"
  }))), !isValidBrowser && /*#__PURE__*/_react.default.createElement(_components.BrowserTip, {
    lang: lang,
    isWindowsWechat: isWindowsWechat
  })), /*#__PURE__*/_react.default.createElement("div", {
    onKeyDown: onContainerKeyDown,
    className: contentClass
  }, /*#__PURE__*/_react.default.createElement(_seatableEditor.default, {
    ref: editorRef,
    value: value,
    columns: columns,
    editorApi: editorApi,
    onContentChanged: onContentChanged
  }))));
}