"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 _classnames = _interopRequireDefault(require("classnames"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _constants = require("../../../constants");
const MenuDropDown = props => {
  const {
    readonly,
    className = '',
    isDisabled,
    dropDownList = [],
    id,
    text,
    iconClass,
    isShowMenuItemTooltip = false,
    isShowListItemIcon = false
  } = props;
  const [isShowDropDown, setIsShowDropDown] = (0, _react.useState)(false);
  const menuItemRef = (0, _react.useRef)();
  const menuDropdownRef = (0, _react.useRef)();
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const containerId = (0, _react.useMemo)(() => `menu-dropdown-${id}`, [id]);
  const handleHideDropDownList = (0, _react.useCallback)(e => {
    var _menuItemRef$current, _menuDropdownRef$curr;
    const isClickOnMenuItem = menuItemRef === null || menuItemRef === void 0 ? void 0 : (_menuItemRef$current = menuItemRef.current) === null || _menuItemRef$current === void 0 ? void 0 : _menuItemRef$current.contains(e.target);
    const isClickOnMenuDropdown = menuDropdownRef === null || menuDropdownRef === void 0 ? void 0 : (_menuDropdownRef$curr = menuDropdownRef.current) === null || _menuDropdownRef$curr === void 0 ? void 0 : _menuDropdownRef$curr.contains(e.target);
    // If click on menu item, menu dropdown will show, and click on menu dropdown, menu dropdown will hide
    if (!isShowDropDown && isClickOnMenuItem && !isClickOnMenuDropdown) return;
    document.removeEventListener('click', handleHideDropDownList);
    setIsShowDropDown(false);
  }, [isShowDropDown]);
  const registerClickEvent = (0, _react.useCallback)(e => {
    setIsShowDropDown(true);
    document.addEventListener('click', handleHideDropDownList);
  }, [handleHideDropDownList]);
  const handleClickDropDownItem = (0, _react.useCallback)((event, item, callback) => {
    event.stopPropagation();
    handleHideDropDownList(event);
    callback && callback(item);
  }, [handleHideDropDownList]);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: menuItemRef,
    id: containerId,
    className: (0, _classnames.default)(className, 'sf-menu-group-item sf-menu-with-dropdown', {
      'header-popover-showed': isShowDropDown,
      'header-toggle-disabled': isDisabled
    }),
    onClick: !readonly && !isDisabled && registerClickEvent
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: `sf-menu-with-dropdown-icon active ${iconClass}`
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-menu-with-dropdown-triangle"
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: `sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowDropDown ? 'drop-down' : 'caret-up'}`
  })), !!isShowDropDown && /*#__PURE__*/_react.default.createElement("div", {
    ref: menuDropdownRef,
    className: "sf-dropdown-list "
  }, dropDownList.map((item, index) => {
    const {
      id,
      iconClass,
      handleClick,
      text
    } = item;
    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
      key: index
    }, /*#__PURE__*/_react.default.createElement("div", {
      id: id,
      className: (0, _classnames.default)('sf-dropdown-list-item'),
      onClick: event => handleClickDropDownItem(event, item, handleClick)
    }, isShowListItemIcon && iconClass && /*#__PURE__*/_react.default.createElement("i", {
      className: `sf-dropdown-menu-item-icon ${iconClass}`
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "sf-dropdown-menu-item-text"
    }, t(text))));
  })), !!isShowMenuItemTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    target: containerId
  }, t(text))));
};
var _default = exports.default = MenuDropDown;