import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import React, { useRef, useContext, useCallback } from 'react';
import PropTypes from 'prop-types';
import kebabCase from 'lodash/kebabCase';
import DropdownToggle from './DropdownToggle';
import DropdownMenu from './DropdownMenu';
import DropdownMenuItem from './DropdownMenuItem';
import { shallowEqual, createChainedFunction, isOneOf, useClassNames, placementPolyfill, PLACEMENT_8, useRootClose, useControlled } from '../utils';
import { SidenavContext } from '../Sidenav/Sidenav';
var defaultProps = {
  as: 'div',
  classPrefix: 'dropdown',
  placement: 'bottomStart',
  trigger: 'click',
  tabIndex: 0
};
var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _withClassPrefix;

  var Component = props.as,
      title = props.title,
      children = props.children,
      className = props.className,
      menuStyle = props.menuStyle,
      disabled = props.disabled,
      renderTitle = props.renderTitle,
      classPrefix = props.classPrefix,
      placement = props.placement,
      activeKey = props.activeKey,
      tabIndex = props.tabIndex,
      toggleClassName = props.toggleClassName,
      trigger = props.trigger,
      icon = props.icon,
      eventKey = props.eventKey,
      toggleAs = props.toggleAs,
      noCaret = props.noCaret,
      style = props.style,
      openProp = props.open,
      showHeader = props.showHeader,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      onMouseLeave = props.onMouseLeave,
      onContextMenu = props.onContextMenu,
      onSelect = props.onSelect,
      onOpen = props.onOpen,
      onClose = props.onClose,
      onToggle = props.onToggle,
      rest = _objectWithoutPropertiesLoose(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "classPrefix", "placement", "activeKey", "tabIndex", "toggleClassName", "trigger", "icon", "eventKey", "toggleAs", "noCaret", "style", "open", "showHeader", "onClick", "onMouseEnter", "onMouseLeave", "onContextMenu", "onSelect", "onOpen", "onClose", "onToggle"]);

  var _ref = useContext(SidenavContext) || {},
      onOpenChange = _ref.onOpenChange,
      _ref$openKeys = _ref.openKeys,
      openKeys = _ref$openKeys === void 0 ? [] : _ref$openKeys,
      sidenav = _ref.sidenav,
      expanded = _ref.expanded;

  var overlayTarget = useRef();
  var triggerTarget = useRef();

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

  var menuExpanded = openKeys.some(function (key) {
    return shallowEqual(key, eventKey);
  });

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

  var collapsible = sidenav && expanded;
  var handleToggle = useCallback(function (isOpen) {
    var nextOpen = typeof isOpen === 'undefined' ? !open : isOpen;
    var fn = nextOpen ? onOpen : onClose;
    fn === null || fn === void 0 ? void 0 : fn();
    setOpen(nextOpen);
    onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextOpen);
  }, [onClose, onOpen, onToggle, open, setOpen]);
  var handleOpenChange = useCallback(function (event) {
    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
  }, [eventKey, onOpenChange]);
  var handleToggleChange = useCallback(function (eventKey, event) {
    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
  }, [onOpenChange]);
  var handleClick = useCallback(function (event) {
    event.preventDefault();

    if (disabled) {
      return;
    }

    handleToggle();
  }, [disabled, handleToggle]);
  var handleMouseEnter = useCallback(function () {
    if (!disabled) {
      handleToggle(true);
    }
  }, [disabled, handleToggle]);
  var handleMouseLeave = useCallback(function () {
    if (!disabled) {
      handleToggle(false);
    }
  }, [disabled, handleToggle]);

  var handleSelect = function handleSelect(eventKey, event) {
    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
    handleToggle(false);
  };

  useRootClose(function () {
    return handleToggle();
  }, {
    triggerTarget: triggerTarget,
    overlayTarget: overlayTarget,
    disabled: !open
  });
  var toggleProps = {
    onClick: createChainedFunction(handleOpenChange, onClick),
    onContextMenu: onContextMenu
  };
  var dropdownProps = {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  };
  /**
   * Bind event of trigger,
   * not used in  in the expanded state of '<Sidenav>'
   */

  if (!collapsible) {
    if (isOneOf('click', trigger)) {
      toggleProps.onClick = createChainedFunction(handleClick, toggleProps.onClick);
    }

    if (isOneOf('contextMenu', trigger)) {
      toggleProps.onContextMenu = createChainedFunction(handleClick, onContextMenu);
    }

    if (isOneOf('hover', trigger)) {
      dropdownProps.onMouseEnter = createChainedFunction(handleMouseEnter, onMouseEnter);
      dropdownProps.onMouseLeave = createChainedFunction(handleMouseLeave, onMouseLeave);
    }
  }

  var menuElement = /*#__PURE__*/React.createElement(DropdownMenu, {
    expanded: menuExpanded,
    style: menuStyle,
    onSelect: handleSelect,
    onToggle: handleToggleChange,
    collapsible: collapsible,
    activeKey: activeKey,
    openKeys: openKeys,
    ref: overlayTarget
  }, showHeader && /*#__PURE__*/React.createElement("li", {
    className: prefix('header')
  }, title), children);
  var toggleElement = /*#__PURE__*/React.createElement(DropdownToggle, _extends({
    role: "button",
    "aria-haspopup": true,
    "aria-expanded": open
  }, rest, toggleProps, {
    ref: triggerTarget,
    as: renderTitle ? 'span' : toggleAs,
    noCaret: noCaret,
    tabIndex: tabIndex,
    className: toggleClassName,
    renderTitle: renderTitle,
    icon: icon,
    placement: placement,
    inSidenav: sidenav
  }), title);
  var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _withClassPrefix[menuExpanded ? 'expand' : 'collapse'] = sidenav, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
  return /*#__PURE__*/React.createElement(Component, _extends({}, dropdownProps, {
    ref: ref,
    style: style,
    className: classes
  }), toggleElement, menuElement);
});
Dropdown.Item = DropdownMenuItem;
Dropdown.Menu = DropdownMenu;
Dropdown.displayName = 'Dropdown';
Dropdown.defaultProps = defaultProps;
Dropdown.propTypes = {
  activeKey: PropTypes.any,
  classPrefix: PropTypes.string,
  trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover', 'contextMenu'])]),
  placement: PropTypes.oneOf(PLACEMENT_8),
  title: PropTypes.node,
  disabled: PropTypes.bool,
  icon: PropTypes.node,
  menuStyle: PropTypes.object,
  className: PropTypes.string,
  toggleClassName: PropTypes.string,
  children: PropTypes.node,
  tabIndex: PropTypes.number,
  open: PropTypes.bool,
  eventKey: PropTypes.any,
  as: PropTypes.elementType,
  toggleAs: PropTypes.elementType,
  noCaret: PropTypes.bool,
  showHeader: PropTypes.bool,
  style: PropTypes.object,
  onClose: PropTypes.func,
  onOpen: PropTypes.func,
  onToggle: PropTypes.func,
  onSelect: PropTypes.func,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
  onContextMenu: PropTypes.func,
  onClick: PropTypes.func,
  renderTitle: PropTypes.func
};
export default Dropdown;