"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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
var _slugid = require("slugid");
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
var _eventTypes = require("../../constants/event-types");
const FallbackEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  let {
    enableEdit,
    value: propsValue,
    onChange: propsOnChange,
    closeEditor
  } = _ref;
  const [value, setValue] = (0, _react.useState)(propsValue);
  const showEditorRef = (0, _react.useRef)(false);
  const inputRef = (0, _react.useRef)(null);
  const editor = (0, _react.useMemo)(() => ({
    _id: (0, _slugid.nice)(4)
  }), []);
  (0, _react.useEffect)(() => {
    if (enableEdit === showEditorRef.current) return;
    if (enableEdit && !showEditorRef.current) {
      setTimeout(() => inputRef.current.focus());
    }
  }, [enableEdit]);
  const handleClear = (0, _react.useCallback)(targetEditor => {
    if (targetEditor._id !== editor._id) return;
    setValue('');
    inputRef.current.focus();
  }, [editor]);
  (0, _react.useEffect)(() => {
    const eventBus = _eventBus.default.getInstance();
    const clearSubscribe = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.CLEAR_ARTICLE, handleClear);
    return () => {
      clearSubscribe();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onChange = (0, _react.useCallback)(event => {
    const newValue = event.target.value;
    if (newValue === value) return;
    setValue(newValue);
  }, [value]);
  const onKeyDown = (0, _react.useCallback)(e => {
    let {
      selectionStart,
      selectionEnd,
      value
    } = e.currentTarget;
    if ((0, _isHotkey.default)('enter', e)) {
      e.preventDefault();
      closeEditor && closeEditor();
      inputRef.current.blur();
    } else if (e.keyCode === 37 && selectionStart === 0 || e.keyCode === 39 && selectionEnd === value.length) {
      e.stopPropagation();
    }
  }, [closeEditor]);
  const onPaste = (0, _react.useCallback)(e => {
    e.stopPropagation();
  }, []);
  const onCut = (0, _react.useCallback)(e => {
    e.stopPropagation();
  }, []);
  (0, _react.useEffect)(() => {
    propsOnChange && propsOnChange({
      text: value,
      preview: value ? value.slice(0, 30) : '',
      links: [],
      images: []
    });
  }, [value, propsOnChange]);
  (0, _react.useImperativeHandle)(ref, () => {
    return {
      getEditor: () => editor
    };
  }, [editor]);
  return /*#__PURE__*/_react.default.createElement("textarea", {
    className: "form-control sf-long-text-inline-fallback-editor-container",
    ref: inputRef,
    rows: 5,
    value: value,
    onChange: onChange,
    onKeyDown: onKeyDown,
    onPaste: onPaste,
    onCut: onCut
  });
});
var _default = exports.default = FallbackEditor;