"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 _reactstrap = require("reactstrap");
var _classnames = _interopRequireDefault(require("classnames"));
var _tooltip = _interopRequireDefault(require("../../../commons/tooltip"));
var _menu = _interopRequireDefault(require("../../../plugins/image/menu"));
var _menu2 = _interopRequireDefault(require("../../../plugins/table/menu"));
var _menu3 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
var _menu4 = _interopRequireDefault(require("../../../plugins/formula/menu"));
var _menu5 = _interopRequireDefault(require("../../../plugins/column/menu"));
var _constants = require("../../../../constants");
require("./style.css");
const InsertToolbar = _ref => {
  let {
    isRichEditor = true,
    className = 'menu-group-item',
    editor,
    readonly,
    isSupportFormula,
    isSupportColumn,
    setIsShowInternetImageModal
  } = _ref;
  const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const popoverRef = (0, _react.useRef)(null);
  const disabled = readonly;
  const insertButtonRef = (0, _react.useRef)(null);
  const insertToolbarId = 'sf-insert-toolbar-btn';
  const toggle = (0, _react.useCallback)(event => {
    var _event$target;
    if (event !== null && event !== void 0 && event.target && (event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) === 'INPUT') {
      return;
    }
    popoverRef.current && popoverRef.current.toggle();
    setMenuShow(!isShowMenu);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isShowMenu]);
  const validClassName = (0, _classnames.default)(className, 'sf-menu-with-dropdown sf-insert-toolbar-btn', {
    'menu-show': isShowMenu,
    'disabled': disabled,
    'rich-icon-btn d-flex': isRichEditor,
    'rich-icon-btn-disabled': isRichEditor && disabled,
    'rich-icon-btn-hover': isRichEditor && !disabled,
    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
  });
  const caretIconClass = `sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowMenu ? 'caret-up' : 'drop-down'}`;
  const {
    bottom
  } = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
    bottom: 92.5
  };
  const props = {
    editor,
    readonly,
    toggle,
    setIsShowInternetImageModal
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    className: validClassName,
    id: insertToolbarId,
    disabled: disabled,
    ref: insertButtonRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-menu-with-dropdown-icon"
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "iconfont icon-insert mr-1"
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "text-truncate"
  }, t('Insert'))), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-menu-with-dropdown-triangle"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: caretIconClass
  }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    target: insertToolbarId
  }, t('Insert')), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
    target: insertToolbarId,
    className: "sf-menu-popover sf-dropdown-menu sf-insert-menu-popover",
    trigger: "legacy",
    placement: "bottom-start",
    hideArrow: true,
    toggle: toggle,
    fade: false,
    ref: popoverRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-insert-menu-container sf-dropdown-menu-container",
    style: {
      maxHeight: window.innerHeight - bottom - 100
    }
  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), isSupportFormula && /*#__PURE__*/_react.default.createElement(_menu4.default, props), isSupportColumn && /*#__PURE__*/_react.default.createElement(_menu5.default, props))));
};
var _default = exports.default = InsertToolbar;