import _extends from "@babel/runtime/helpers/esm/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["collapsing"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["collapse-in"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["collapsing"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["collapse-out"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["toggle-icon"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["toggle"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
import AngleRight from '@rsuite/icons/legacy/AngleRight';
import Collapse from '../Animation/Collapse';
import DropdownMenuItem from './DropdownMenuItem';
import Ripple from '../Ripple';
import { createChainedFunction, ReactChildren, shallowEqual, mergeRefs, useClassNames } from '../utils';
import useCustom from '../utils/useCustom';
var defaultProps = {
  openKeys: [],
  classPrefix: 'dropdown-menu'
};
var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var children = props.children,
      className = props.className,
      classPrefix = props.classPrefix,
      collapsible = props.collapsible,
      expanded = props.expanded,
      activeKey = props.activeKey,
      openKeys = props.openKeys,
      onSelect = props.onSelect,
      onToggle = props.onToggle,
      rest = _objectWithoutPropertiesLoose(props, ["children", "className", "classPrefix", "collapsible", "expanded", "activeKey", "openKeys", "onSelect", "onToggle"]);

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

  var _useCustom = useCustom('DropdownMenu'),
      rtl = _useCustom.rtl;

  var handleToggleChange = useCallback(function (eventKey, event) {
    onToggle === null || onToggle === void 0 ? void 0 : onToggle(eventKey, event);
  }, [onToggle]);
  var isActive = useCallback(function (props) {
    if (props.active || typeof activeKey !== 'undefined' && shallowEqual(props.eventKey, activeKey)) {
      return true;
    }

    if (ReactChildren.some(props.children, function (child) {
      return isActive(child.props);
    })) {
      return true;
    }

    return props.active;
  }, [activeKey]);

  var getMenuItemsAndStatus = function getMenuItemsAndStatus(children) {
    var hasActiveItem;
    var items = React.Children.map(children, function (item, index) {
      var _item$type;

      if (!item) {
        return null;
      }

      var displayName = item === null || item === void 0 ? void 0 : (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName;
      var active;

      if (displayName === 'DropdownMenuItem' || displayName === 'DropdownMenu') {
        active = isActive(item.props);

        if (active) {
          hasActiveItem = true;
        }
      }

      if (displayName === 'DropdownMenuItem') {
        var onItemSelect = item.props.onSelect;
        return /*#__PURE__*/React.cloneElement(item, {
          key: index,
          active: active,
          onSelect: createChainedFunction(onSelect, onItemSelect)
        });
      } else if (displayName === 'DropdownMenu') {
        var itemsAndStatus = getMenuItemsAndStatus(item.props.children);
        var _item$props = item.props,
            icon = _item$props.icon,
            open = _item$props.open,
            trigger = _item$props.trigger,
            pullLeft = _item$props.pullLeft,
            _eventKey = _item$props.eventKey,
            title = _item$props.title,
            _className = _item$props.className;

        var _expanded = openKeys.some(function (key) {
          return shallowEqual(key, _eventKey);
        });

        var itemClassName = merge(_className, prefix("pull-" + (pullLeft ? 'left' : 'right'), {
          'item-focus': isActive(item.props)
        }));
        var Icon = pullLeft && !rtl || rtl && !pullLeft ? AngleLeft : AngleRight;
        return /*#__PURE__*/React.createElement(DropdownMenuItem, {
          icon: icon,
          open: open,
          trigger: trigger,
          expanded: _expanded,
          className: itemClassName,
          pullLeft: pullLeft,
          as: "div",
          submenu: true,
          role: null
        }, /*#__PURE__*/React.createElement("div", {
          className: prefix(_templateObject()),
          onClick: function onClick(e) {
            return handleToggleChange(_eventKey, e);
          },
          role: "menu",
          tabIndex: -1
        }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement(Icon, {
          className: prefix(_templateObject2())
        }), /*#__PURE__*/React.createElement(Ripple, null)), renderCollapse(function (transitionProps, ref) {
          var _ref = transitionProps || {},
              className = _ref.className,
              transitionRestProps = _objectWithoutPropertiesLoose(_ref, ["className"]);

          return /*#__PURE__*/React.createElement("div", _extends({}, transitionRestProps, {
            ref: ref,
            role: "menu",
            className: merge(className, withClassPrefix())
          }), itemsAndStatus.items);
        }, _expanded));
      }

      return item;
    });
    return {
      items: items,
      active: hasActiveItem
    };
  };

  var renderCollapse = function renderCollapse(children, expanded) {
    return collapsible ? /*#__PURE__*/React.createElement(Collapse, {
      in: expanded,
      exitedClassName: prefix(_templateObject3()),
      exitingClassName: prefix(_templateObject4()),
      enteredClassName: prefix(_templateObject5()),
      enteringClassName: prefix(_templateObject6())
    }, children) : children();
  };

  var _getMenuItemsAndStatu = getMenuItemsAndStatus(children),
      items = _getMenuItemsAndStatu.items,
      active = _getMenuItemsAndStatu.active;

  var classes = merge(className, withClassPrefix({
    active: active
  }));
  return renderCollapse(function (transitionProps, transitionRef) {
    var _ref2 = transitionProps || {},
        transitionClassName = _ref2.className,
        transitionRestProps = _objectWithoutPropertiesLoose(_ref2, ["className"]);

    return /*#__PURE__*/React.createElement("div", _extends({}, rest, transitionRestProps, {
      className: classNames(classes, transitionClassName),
      role: "menu",
      ref: mergeRefs(transitionRef, ref)
    }), items);
  }, expanded);
});
DropdownMenu.displayName = 'DropdownMenu';
DropdownMenu.defaultProps = defaultProps;
DropdownMenu.propTypes = {
  active: PropTypes.bool,
  activeKey: PropTypes.any,
  className: PropTypes.string,
  children: PropTypes.node,
  icon: PropTypes.any,
  classPrefix: PropTypes.string,
  pullLeft: PropTypes.bool,
  title: PropTypes.node,
  open: PropTypes.bool,
  trigger: PropTypes.oneOf(['click', 'hover']),
  eventKey: PropTypes.any,
  openKeys: PropTypes.array,
  expanded: PropTypes.bool,
  collapsible: PropTypes.bool,
  onSelect: PropTypes.func,
  onToggle: PropTypes.func
};
export default DropdownMenu;