"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 _reactstrap = require("reactstrap");
var _reactI18next = require("react-i18next");
var _components = require("../../../../components");
var _isUrl = _interopRequireDefault(require("is-url"));
var _helper = require("../helper");
var _constants = require("../../../../constants");
const ImageMenuInsertInternetDialog = _ref => {
  let {
    editor,
    closeDialog,
    className = ''
  } = _ref;
  const [imageUrl, setSetImageUrl] = (0, _react.useState)('');
  const imgUrlInputRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const isCommitBtnDisabled = (0, _react.useMemo)(() => {
    if (imageUrl.length === 0) return true;
    if (!(0, _isUrl.default)(imageUrl)) return true;
    return false;
  }, [imageUrl]);
  const onModalOpened = () => {
    var _imgUrlInputRef$curre;
    imgUrlInputRef === null || imgUrlInputRef === void 0 ? void 0 : (_imgUrlInputRef$curre = imgUrlInputRef.current) === null || _imgUrlInputRef$curre === void 0 ? void 0 : _imgUrlInputRef$curre.focus();
  };
  const handleSubmit = e => {
    if (!(0, _isUrl.default)(imageUrl)) return false;
    if (imageUrl.length === 0) return;
    (0, _helper.insertImage)(editor, imageUrl);
    closeDialog();
  };
  const handleInputKeyDown = e => {
    if (e.key === 'Enter') {
      handleSubmit(e);
    }
  };
  const onModalContainerMouseDown = e => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  };
  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
    onMouseDown: onModalContainerMouseDown,
    isOpen: true,
    toggle: closeDialog,
    className: className,
    zIndex: 1071,
    onOpened: onModalOpened,
    onClosed: closeDialog
  }, /*#__PURE__*/_react.default.createElement(_components.ModalHeader, {
    toggle: closeDialog
  }, t('Insert_image')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
    for: "imageUrlInput"
  }, t('Image_address')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
    invalid: !!imageUrl && isCommitBtnDisabled,
    type: "url",
    onKeyDown: handleInputKeyDown,
    id: "imageUrlInput",
    innerRef: imgUrlInputRef,
    value: imageUrl,
    onChange: e => setSetImageUrl(e.target.value.trim())
  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, t('Image_address_invalid'))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    color: "secondary",
    onClick: closeDialog
  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
    color: "primary",
    disabled: isCommitBtnDisabled,
    onClick: handleSubmit
  }, t('Submit'))));
};
var _default = exports.default = ImageMenuInsertInternetDialog;