"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));

var _utils = require("../utils");

var _Sidenav = require("../Sidenav/Sidenav");

var defaultProps = {
  as: _SafeAnchor.default,
  classPrefix: 'dropdown-item',
  trigger: 'hover'
};

var DropdownMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _withClassPrefix;

  var Component = props.as,
      children = props.children,
      divider = props.divider,
      panel = props.panel,
      active = props.active,
      disabled = props.disabled,
      className = props.className,
      submenu = props.submenu,
      style = props.style,
      classPrefix = props.classPrefix,
      tabIndex = props.tabIndex,
      pullLeft = props.pullLeft,
      icon = props.icon,
      trigger = props.trigger,
      openProp = props.open,
      expandedProp = props.expanded,
      eventKey = props.eventKey,
      onClick = props.onClick,
      onMouseOver = props.onMouseOver,
      onMouseOut = props.onMouseOut,
      onSelect = props.onSelect,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "divider", "panel", "active", "disabled", "className", "submenu", "style", "classPrefix", "tabIndex", "pullLeft", "icon", "trigger", "open", "expanded", "eventKey", "onClick", "onMouseOver", "onMouseOut", "onSelect"]);

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      merge = _useClassNames.merge,
      withClassPrefix = _useClassNames.withClassPrefix,
      prefix = _useClassNames.prefix;

  var _ref = (0, _react.useContext)(_Sidenav.SidenavContext) || {},
      sidenav = _ref.sidenav,
      expanded = _ref.expanded;

  var _useControlled = (0, _utils.useControlled)(openProp, false),
      open = _useControlled[0],
      setOpen = _useControlled[1];

  var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["pull-" + (pullLeft ? 'left' : 'right')] = submenu, _withClassPrefix[expandedProp ? 'expand' : 'collapse'] = submenu && sidenav, _withClassPrefix['with-icon'] = icon, _withClassPrefix.open = open, _withClassPrefix.submenu = submenu, _withClassPrefix.active = active, _withClassPrefix.disabled = disabled, _withClassPrefix)));
  var handleClick = (0, _react.useCallback)(function (event) {
    if (disabled) {
      event.preventDefault();
      return;
    }

    if ((0, _utils.isOneOf)('click', trigger) && submenu) {
      setOpen(!open);
    }

    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
  }, [disabled, open, eventKey, trigger, submenu, setOpen, onSelect]);
  var handleMouseOver = (0, _react.useCallback)(function () {
    setOpen(true);
  }, [setOpen]);
  var handleMouseOut = (0, _react.useCallback)(function () {
    setOpen(false);
  }, [setOpen]);
  var itemEventProps = {};

  if ((0, _utils.isOneOf)('hover', trigger) && submenu && !expanded) {
    itemEventProps.onMouseOver = (0, _utils.createChainedFunction)(handleMouseOver, onMouseOver);
    itemEventProps.onMouseOut = (0, _utils.createChainedFunction)(handleMouseOut, onMouseOut);
  }

  if (divider) {
    return /*#__PURE__*/_react.default.createElement("div", {
      ref: ref,
      role: "separator",
      style: style,
      className: merge(prefix('divider'), className)
    });
  }

  if (panel) {
    return /*#__PURE__*/_react.default.createElement("div", {
      ref: ref,
      role: "menuitem",
      style: style,
      className: merge(prefix('panel'), className)
    }, children);
  }

  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
    role: "menuitem"
  }, rest, itemEventProps, {
    tabIndex: disabled ? -1 : tabIndex,
    ref: ref,
    "aria-disabled": disabled,
    style: style,
    className: classes,
    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)
  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
    className: prefix('menu-icon')
  }), children);
});

DropdownMenuItem.displayName = 'DropdownMenuItem';
DropdownMenuItem.defaultProps = defaultProps;
DropdownMenuItem.propTypes = {
  as: _propTypes.default.elementType,
  divider: _propTypes.default.bool,
  panel: _propTypes.default.bool,
  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
  open: _propTypes.default.bool,
  expanded: _propTypes.default.bool,
  active: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  pullLeft: _propTypes.default.bool,
  submenu: _propTypes.default.bool,
  onSelect: _propTypes.default.func,
  onClick: _propTypes.default.func,
  icon: _propTypes.default.node,
  eventKey: _propTypes.default.any,
  className: _propTypes.default.string,
  style: _propTypes.default.object,
  children: _propTypes.default.node,
  classPrefix: _propTypes.default.string,
  tabIndex: _propTypes.default.number
};
var _default = DropdownMenuItem;
exports.default = _default;