"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _react = _interopRequireWildcard(require("react"));
var _reactstrap = require("reactstrap");
var _reactI18next = require("react-i18next");
var _components = require("../../../../components");
var _helper = require("../helper");
var _constants = require("../../../../constants");
const LinkModal = _ref => {
  let {
    editor,
    onCloseModal,
    linkTitle,
    linkUrl
  } = _ref;
  const [formData, setFormData] = (0, _react.useState)({
    linkUrl: linkUrl !== null && linkUrl !== void 0 ? linkUrl : '',
    linkTitle: linkTitle !== null && linkTitle !== void 0 ? linkTitle : ''
  });
  const [validatorErrorMessage, setValidatorErrorMessage] = (0, _react.useState)({
    linkUrl: '',
    linkTitle: ''
  });
  const linkAddressRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const isSubmitDisabled = (0, _react.useMemo)(() => {
    const isFormDataEmpty = Object.values(formData).some(value => value.length === 0);
    if (isFormDataEmpty) return true;
    const isValidatorErrorMessage = Object.values(validatorErrorMessage).some(value => value.length > 0);
    if (isValidatorErrorMessage) return true;
    return false;
  }, [formData, validatorErrorMessage]);
  const onOpened = (0, _react.useCallback)(() => {
    var _linkAddressRef$curre;
    (_linkAddressRef$curre = linkAddressRef.current) === null || _linkAddressRef$curre === void 0 ? void 0 : _linkAddressRef$curre.focus();
  }, []);

  /**
   * @param {String} formItemName  form item name
   * @param {String} formItemValue form item value
   * @returns if validate passed, return Promise.resolve(); else return Promise.reject(error message);
   */
  const validateFormData = (0, _react.useCallback)((formItemName, formItemValue) => {
    if (formItemName === 'linkUrl') {
      if (formItemValue.length === 0) return Promise.reject('Link_address_required');
      // When entering a URL in the dialog box, the validity is not checked.
      // if (!isUrl(formItemValue)) return Promise.reject('Link_address_invalid');
    }
    if (formItemName === 'linkTitle') {
      if (!formItemValue.length) return Promise.reject('Link_title_required');
      if (!formItemValue.trim().length) return Promise.reject('Blank_title_not_allowed');
    }
    return Promise.resolve();
  }, []);
  const preProcessBeforeOnchange = (0, _react.useCallback)((formItemName, formItemValue) => {
    if (formItemName === 'linkUrl') {
      return formItemValue.trim();
    }
    return formItemValue;
  }, []);
  const onFormValueChange = (0, _react.useCallback)(e => {
    const formItemName = e.target.name;
    let formItemValue = e.target.value;
    // pre-process form item value
    formItemValue = preProcessBeforeOnchange(formItemName, formItemValue);
    validateFormData(formItemName, formItemValue).then(() => setValidatorErrorMessage((0, _objectSpread2.default)((0, _objectSpread2.default)({}, validatorErrorMessage), {}, {
      [formItemName]: ''
    })), errMsg => setValidatorErrorMessage((0, _objectSpread2.default)((0, _objectSpread2.default)({}, validatorErrorMessage), {}, {
      [formItemName]: errMsg
    })));
    setFormData((0, _objectSpread2.default)((0, _objectSpread2.default)({}, formData), {}, {
      [formItemName]: formItemValue
    }));
  }, [formData, preProcessBeforeOnchange, validateFormData, validatorErrorMessage]);
  const onSubmit = (0, _react.useCallback)(e => {
    // re-validate form data before submit
    Object.entries(formData).forEach(_ref2 => {
      let [key, value] = _ref2;
      return validateFormData(key, value).catch(errMsg => setValidatorErrorMessage(prev => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
        [key]: errMsg
      })));
    });
    if (!isSubmitDisabled) {
      const isLinkActive = (0, _helper.isLinkType)(editor);
      isLinkActive ? (0, _helper.updateLink)(editor, formData.linkUrl, formData.linkTitle) : (0, _helper.insertLink)({
        editor,
        url: formData.linkUrl,
        title: formData.linkTitle
      });
      onCloseModal();
    }
    e.preventDefault();
    e.stopPropagation();
  }, [editor, formData, isSubmitDisabled, onCloseModal, validateFormData]);
  const onKeydown = (0, _react.useCallback)(e => {
    if (e.key === 'Enter') {
      onSubmit(e);
    }
  }, [onSubmit]);
  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
    isOpen: true,
    toggle: onCloseModal,
    onOpened: onOpened,
    zIndex: 1100
  }, /*#__PURE__*/_react.default.createElement(_components.ModalHeader, {
    toggle: onCloseModal
  }, t('Insert_link')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, {
    onChange: onFormValueChange
  }, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
    for: "linkUrl"
  }, t('Link_address')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
    onKeyDown: onKeydown
    // `onChange={() => void 0}`  to fix reactstrap error which need `onChange` when `value` setteled, (`onChange` has been listened at `<Form>` )
    ,
    onChange: () => void 0,
    value: formData.linkUrl,
    invalid: !!validatorErrorMessage.linkUrl,
    name: "linkUrl",
    innerRef: linkAddressRef,
    type: "url",
    id: "linkUrl"
  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, t(validatorErrorMessage.linkUrl))), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
    for: "linkTitle"
  }, t('Link_title')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
    onKeyDown: onKeydown
    // `onChange={() => void 0}`  to fix reactstrap error which need `onChange` when `value` setteled, (`onChange` has been listened at `<Form>` )
    ,
    onChange: () => void 0,
    value: formData.linkTitle,
    invalid: !!validatorErrorMessage.linkTitle,
    name: "linkTitle",
    id: "linkTitle"
  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, t(validatorErrorMessage.linkTitle))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    onClick: onCloseModal,
    color: "secondary"
  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    onClick: onSubmit,
    disabled: isSubmitDisabled,
    color: "primary"
  }, t('Add_link'))));
};
var _default = exports.default = LinkModal;