"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 _reactI18next = require("react-i18next");
var _helper = require("../helper");
var _tooltip = _interopRequireDefault(require("../../../commons/tooltip"));
var _keyboard = require("../../../constants/keyboard");
var _constants = require("../../../constants");
var _constants2 = require("../../../../constants");
var _core = require("../../../core");
var _elementTypes = require("../../../constants/element-types");
require("./style.css");
const headerPopoverShowerList = [_constants.ELementTypes.PARAGRAPH, ..._constants.HEADERS];
const HeaderMenu = _ref => {
  let {
    editor,
    readonly,
    isRichEditor
  } = _ref;
  const [isShowHeaderPopover, setIsShowHeaderPopover] = (0, _react.useState)(false);
  const headerPopoverRef = (0, _react.useRef)();
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants2.TRANSLATE_NAMESPACE);
  const getCurrentType = () => {
    let type = (0, _helper.getHeaderType)(editor);
    if (!type) {
      const selectNode = (0, _core.getSelectedNodeByType)(editor, _elementTypes.PARAGRAPH);
      type = selectNode && selectNode.type;
    }
    return type;
  };
  const currentHeaderType = getCurrentType();
  const isDisabled = (0, _helper.isMenuDisabled)(editor, readonly);
  const onHideHeaderMenu = (0, _react.useCallback)(e => {
    const menu = headerPopoverRef.current;
    const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
    if (clickIsInMenu) return;
    setIsShowHeaderPopover(false);
    unregisterEventHandler();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const registerEventHandler = (0, _react.useCallback)(() => {
    document.addEventListener('mousedown', onHideHeaderMenu);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const unregisterEventHandler = (0, _react.useCallback)(() => {
    document.removeEventListener('mousedown', onHideHeaderMenu);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onToggleClick = event => {
    event.stopPropagation();
    event.preventDefault();
    event.nativeEvent.stopImmediatePropagation();
    !isShowHeaderPopover ? registerEventHandler() : unregisterEventHandler();
    setIsShowHeaderPopover(!isShowHeaderPopover);
  };
  const onMouseDown = (0, _react.useCallback)(type => {
    (0, _helper.setHeaderType)(editor, type);
    setIsShowHeaderPopover(false);
    unregisterEventHandler();
  }, [editor, unregisterEventHandler]);
  const getToolTip = type => {
    // chrome in Mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (HTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
    const isMac = window.navigator.userAgent.indexOf('Macintosh') !== -1;
    return isMac ? _keyboard.MAC_HOTKEYS_TIP_HEADER[type] : _keyboard.WIN_HOTKEYS_EVENT_HEADER[type];
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('sf-header-menu', {
      'header-popover-showed': isShowHeaderPopover,
      'header-toggle-disabled': isDisabled
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('sf-header-toggle', {
      'header-toggle-disabled': isDisabled,
      'header-popover-showed': isShowHeaderPopover
    }),
    onClick: isDisabled ? void 0 : onToggleClick
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "active"
  }, t(_constants.HEADER_TITLE_MAP[currentHeaderType !== null && currentHeaderType !== void 0 ? currentHeaderType : _constants.ELementTypes.PARAGRAPH])), /*#__PURE__*/_react.default.createElement("span", {
    className: "mdfont md-".concat(isShowHeaderPopover ? 'arrow-up' : 'arrow-down')
  })), isShowHeaderPopover && /*#__PURE__*/_react.default.createElement("div", {
    ref: headerPopoverRef,
    className: "sf-header-popover"
  }, headerPopoverShowerList.map((item, index) => {
    const id = "".concat(item, "-").concat(index);
    const isSelected = currentHeaderType === item;
    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
      key: index
    }, /*#__PURE__*/_react.default.createElement("div", {
      id: id,
      className: (0, _classnames.default)('sf-dropdown-menu-item', {
        'position-relative': isSelected
      }),
      onClick: () => onMouseDown(item)
    }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
      className: "mdfont md-check-mark"
    }), /*#__PURE__*/_react.default.createElement("span", null, t(_constants.HEADER_TITLE_MAP[item]))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
      target: id,
      placement: "right"
    }, getToolTip(item)));
  })));
};
var _default = exports.default = HeaderMenu;