"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 _elementTypes = require("../../../constants/element-types");
var _menusConfig = require("../../../constants/menus-config");
var _helper = require("../helper");
var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
var _reactstrap = require("reactstrap");
var _reactI18next = require("react-i18next");
var _constants = require("../../../../constants");
const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.IMAGE];
const ImageMenu = _ref => {
  var _editor$api;
  let {
    readonly,
    editor,
    toggle,
    setIsShowInternetImageModal
  } = _ref;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const fileInputRef = (0, _react.useRef)(null);
  const openFileDIalog = (0, _react.useCallback)(e => {
    var _fileInputRef$current;
    e.stopPropagation();
    toggle && toggle();
    e.nativeEvent.stopImmediatePropagation();
    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
  }, [toggle]);
  const handleUploadLocalImage = (0, _react.useCallback)(async e => {
    const file = e.target.files[0];
    if (!file) return;
    (0, _helper.handleUpdateFile)(editor, file);
    e.target.value = null;
  }, [editor]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
    disabled: readonly,
    menuConfig: menuConfig,
    className: "pr-2"
  }, !readonly && /*#__PURE__*/_react.default.createElement("i", {
    className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
  })), !readonly && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
    target: menuConfig.id,
    trigger: "hover",
    className: "sf-menu-popover sf-sub-dropdown-menu sf-insert-image-menu-popover",
    popperClassName: "sf-popover-box-shadow",
    placement: "right-start",
    hideArrow: true,
    fade: false
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-insert-image-menu-popover-container sf-dropdown-menu"
  }, (editor === null || editor === void 0 ? void 0 : (_editor$api = editor.api) === null || _editor$api === void 0 ? void 0 : _editor$api.uploadLocalImage) && /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu-item",
    onClick: openFileDIalog
  }, t('Upload_local_image')), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu-item",
    onClick: () => setIsShowInternetImageModal(true)
  }, t('Insert_network_image')))), /*#__PURE__*/_react.default.createElement("input", {
    ref: fileInputRef,
    onClick: openFileDIalog,
    onChange: handleUploadLocalImage,
    style: {
      display: 'none'
    },
    type: "file",
    accept: "image/*"
  }));
};
var _default = exports.default = ImageMenu;