"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 _classnames = _interopRequireDefault(require("classnames"));
var _slateReact = require("slate-react");
var _linkPopover = _interopRequireDefault(require("./link-popover"));
var _helper = require("../helper");
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
var _eventTypes = require("../../../../constants/event-types");
require("./style.css");
/* eslint-disable react-hooks/rules-of-hooks */

const renderLink = (_ref, editor) => {
  let {
    attributes,
    children,
    element,
    option
  } = _ref;
  const [isShowPopover, setIsShowPopover] = (0, _react.useState)(false);
  const [popoverPosition, setPopoverPosition] = (0, _react.useState)({
    top: 0,
    left: 0
  });
  const isReadonly = (0, _slateReact.useReadOnly)();
  const {
    render
  } = option || {};

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const isLinkActive = (0, _react.useMemo)(() => (0, _helper.isLinkType)(editor), [editor.selection]);
  const onClosePopover = (0, _react.useCallback)(e => {
    unregisterClickEvent();
    setIsShowPopover(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [setPopoverPosition]);
  const registerClickEvent = (0, _react.useCallback)(() => {
    window.addEventListener('click', onClosePopover);
  }, [onClosePopover]);
  const unregisterClickEvent = (0, _react.useCallback)(() => {
    window.removeEventListener('click', onClosePopover);
  }, [onClosePopover]);
  const onLinkClick = (0, _react.useCallback)(e => {
    e.stopPropagation();
    const eventBus = _eventBus.default.getInstance();
    if (isReadonly) {
      eventBus.dispatch(_eventTypes.EXTERNAL_EVENTS.ON_LINK_CLICK, e, editor._id);
      return;
    }
    // Only one popover can be open at the same time, close other popover and update new popover controller function.
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_CLOSE_LINK_POPOVER);
    eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_CLOSE_LINK_POPOVER, () => setIsShowPopover(false));
    const linkInfo = (0, _helper.getLinkInfo)(editor);
    if (!linkInfo) return;
    const {
      top,
      left,
      width
    } = e.target.getBoundingClientRect();
    const popoverTop = top - 42;
    const popoverLeft = left - 140 / 2 + width / 2;
    setPopoverPosition({
      top: popoverTop,
      left: popoverLeft
    });
    setIsShowPopover(true);
    registerClickEvent();
  }, [editor, isReadonly, registerClickEvent]);
  const onHrefClick = (0, _react.useCallback)(e => {
    e.preventDefault();
  }, []);
  const url = (0, _helper.getElementHref)(element);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _react.isValidElement)(render) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _react.cloneElement)(render, {
    element: {
      ...element,
      url
    },
    isShowPopover,
    onLinkClick,
    onHrefClick,
    attributes,
    children,
    editor
  })) : /*#__PURE__*/_react.default.createElement("span", Object.assign({
    onClick: onLinkClick,
    "data-url": url,
    className: (0, _classnames.default)('sf-virtual-link', {
      selected: isShowPopover
    })
  }, attributes), /*#__PURE__*/_react.default.createElement("a", {
    href: url,
    onClick: onHrefClick
  }, children)), isLinkActive && isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
    popoverPosition: popoverPosition,
    linkUrl: url,
    editor: editor,
    onClosePopover: onClosePopover
  }));
};
var _default = exports.default = renderLink;