"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 _reactDom = require("react-dom");
var _reactI18next = require("react-i18next");
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
var _helper = require("../helper");
var _eventTypes = require("../../../../constants/event-types");
var _constants = require("../../../../constants");
const LinkPopover = _ref => {
  let {
    linkUrl,
    onClosePopover,
    popoverPosition,
    editor
  } = _ref;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  (0, _react.useEffect)(() => {
    return () => {
      // unregister click event before unmount
      onClosePopover();
    };
  }, [onClosePopover]);
  const onLinkClick = (0, _react.useCallback)(event => {
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.EXTERNAL_EVENTS.ON_LINK_CLICK, event, editor._id);
    onClosePopover();
  }, [editor, onClosePopover]);
  const onUnwrapLink = (0, _react.useCallback)(e => {
    e.stopPropagation();
    (0, _helper.unWrapLinkNode)(editor);
  }, [editor]);
  const onEditLink = (0, _react.useCallback)(e => {
    e.stopPropagation();
    const linkNode = (0, _helper.getLinkInfo)(editor);
    if (!linkNode) {
      onClosePopover();
      return;
    }
    const {
      linkTitle,
      linkUrl
    } = linkNode;
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_OPEN_LINK_MODAL, {
      linkTitle,
      linkUrl
    });
    onClosePopover();
  }, [editor, onClosePopover]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
    id: "link-op-menu",
    className: "sf-link-op-menu",
    style: popoverPosition
  }, /*#__PURE__*/_react.default.createElement("span", {
    "data-url": linkUrl,
    onClick: onLinkClick,
    className: "sf-link-op-menu-link"
  }, t('Open_link')), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-link-op-icons d-flex "
  }, /*#__PURE__*/_react.default.createElement("span", {
    role: "button",
    className: "sf-link-op-icon",
    onClick: onEditLink
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "iconfont icon-rename"
  })), /*#__PURE__*/_react.default.createElement("span", {
    role: "button",
    className: "sf-link-op-icon",
    onClick: onUnwrapLink
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "iconfont icon-unlink"
  })))), document.body));
};
var _default = exports.default = LinkPopover;