import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import List from "../../List";
import ChevronRight from "../../Icon/ChevronRight";
import getClasses from "./styles";
import Collapse from "../../Collapse";
import { useId } from "../../hooks";

var SidebarDropdown = function SidebarDropdown(props) {
  var classes = getClasses();
  var itemsList = props.itemsList,
      id = props.id,
      isSidebarCollapsed = props.isSidebarCollapsed,
      isOpen = props.isOpen,
      Handle = props.Handle;
  var dropdownId = useId(id, "dropdown");
  var endIcon = /*#__PURE__*/React.createElement(ChevronRight, {
    className: isOpen ? classnames(classes.arrow, classes.arrowPosition) : classes.arrow
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(Handle, {
    "aria-expanded": isOpen,
    "aria-controls": dropdownId,
    endIcon: endIcon
  }), /*#__PURE__*/React.createElement(Collapse, {
    open: isOpen,
    id: dropdownId
  }, /*#__PURE__*/React.createElement(List, {
    className: isSidebarCollapsed ? classes.dropdownListCollapsed : classes.dropdownList
  }, itemsList)));
};

SidebarDropdown.propTypes = {
  itemsList: PropTypes.oneOfType([PropTypes.instanceOf(Array), PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  isSidebarCollapsed: PropTypes.bool,
  isOpen: PropTypes.bool
};
SidebarDropdown.defaultProps = {
  itemsList: [],
  isSidebarCollapsed: false,
  isOpen: false
};
export default SidebarDropdown;