"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactstrap = require("reactstrap");
var _reactI18next = require("react-i18next");
var _constants = require("../../../../constants");
var _core = require("../../../core");
var _components = require("../../../../components");
var _helper = require("../helper");
const FormulaModal = _ref => {
  let {
    editor,
    formula,
    onCloseModal
  } = _ref;
  const oldFormulaRef = (0, _react.useRef)(formula);
  const [newFormula, setNewFormula] = (0, _react.useState)(formula);
  const [modifyPath, setModifyPath] = (0, _react.useState)(null);
  const [isDisabled, setIsDisabled] = (0, _react.useState)(true);
  const formulaPreviewRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);

  // record current selection position
  (0, _react.useEffect)(() => {
    const node = (0, _core.getAboveBlockNode)(editor);
    if (node) {
      setModifyPath(node[1]);
      return;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  (0, _react.useEffect)(() => {
    if (formulaPreviewRef.current) {
      formulaPreviewRef.current.innerHTML = '';
      const dom = window.MathJax.tex2svg(newFormula);
      formulaPreviewRef.current.appendChild(dom);
    }
  });
  const onFormulaChange = (0, _react.useCallback)(event => {
    setIsDisabled(false);
    setNewFormula(event.target.value);
  }, []);
  const handleUpdateFormula = (0, _react.useCallback)(() => {
    const data = {
      formula: newFormula,
      at: modifyPath
    };
    if (oldFormulaRef.current) {
      (0, _helper.updateFormula)(editor, data);
    } else {
      (0, _helper.insertFormula)(editor, data);
    }
    onCloseModal();
  }, [editor, modifyPath, newFormula, onCloseModal]);
  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
    isOpen: true,
    toggle: onCloseModal,
    autoFocus: false,
    wrapClassName: "formula-dialog-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_components.ModalHeader, {
    toggle: onCloseModal
  }, t('Insert_formula')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/_react.default.createElement("label", {
    className: "form-check-label"
  }, t('Formula')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
    type: "textarea",
    className: "form-control",
    value: newFormula,
    autoFocus: true,
    onChange: onFormulaChange
  })), /*#__PURE__*/_react.default.createElement("div", {
    ref: formulaPreviewRef,
    className: "formula-preview"
  })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    color: "secondary",
    onClick: onCloseModal
  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    color: "primary",
    disabled: isDisabled,
    onClick: handleUpdateFormula
  }, t('Insert_formula'))));
};
var _default = exports.default = FormulaModal;