"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 _reactI18next = require("react-i18next");
var _imageMenuDialog = _interopRequireDefault(require("./image-menu-dialog"));
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
var _eventTypes = require("../../../../constants/event-types");
var _helper = require("../helper");
var _constants = require("../../../../constants");
require("./image-menu-popover.css");
const ImageMenuPopover = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  var _editor$api;
  let {
    editor,
    handelClosePopover,
    isSupportInsertSeafileImage
  } = _ref;
  const [isShowInternetImageModal, setIsShowInternetImageModal] = (0, _react.useState)(false);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const handleInsertNetworkImage = e => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    setIsShowInternetImageModal(true);
  };
  const handleClickFileInput = (0, _react.useCallback)(e => {
    e.stopPropagation();
    e.target.value = null;
    e.nativeEvent.stopImmediatePropagation();
  }, []);
  const handleUploadLocalImage = (0, _react.useCallback)(async e => {
    const file = e.target.files[0];
    (0, _helper.handleUpdateFile)(editor, file);
    handelClosePopover();
  }, [editor, handelClosePopover]);
  const onToggleImageDialog = (0, _react.useCallback)(() => {
    setIsShowInternetImageModal(false);
    handelClosePopover();
  }, [handelClosePopover]);
  const handleInsertLibraryImage = e => {
    e.nativeEvent.stopImmediatePropagation();
    e.stopPropagation();
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.EXTERNAL_EVENTS.ON_INSERT_IMAGE, editor.selection);
    handelClosePopover();
  };
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-image-popover",
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-image-popover-item",
    onClick: handleInsertNetworkImage
  }, t('Insert_network_image')), (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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: "sf-image-uploader",
    className: "sf-image-popover-item",
    onClick: handleClickFileInput
  }, t('Upload_local_image')), /*#__PURE__*/_react.default.createElement("input", {
    onClick: handleClickFileInput,
    onChange: handleUploadLocalImage,
    type: "file",
    accept: "image/*",
    className: "sf-image-uploader",
    id: "sf-image-uploader"
  })), isSupportInsertSeafileImage && /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-image-popover-item",
    onClick: handleInsertLibraryImage
  }, t('Insert_library_image'))), isShowInternetImageModal && /*#__PURE__*/_react.default.createElement(_imageMenuDialog.default, {
    editor: editor,
    onToggleImageDialog: onToggleImageDialog
  }));
});
var _default = exports.default = ImageMenuPopover;