import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "childrenItems", "isChild", "openList", "disabled", "onClickDisabled", "onClick"];
import React, { useState } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import makeStyles from "../../styles/makeStyles";
import ListItem from "../../List/Item";
import SidebarHandle from "./SidebarHandle";
import Dropdown from "../Dropdown";

var getValidChildren = function getValidChildren(children) {
  return React.Children.toArray(children).filter(function (child) {
    return /*#__PURE__*/React.isValidElement(child);
  });
};

var getClasses = makeStyles(function (_ref) {
  var colors = _ref.cleverUI.colors;
  return {
    disabledClass: {
      "& > p, & .js-sidebar-item-icon-left": {
        color: colors.neutral[300]
      }
    }
  };
});

var SidebarItem = function SidebarItem(props) {
  var className = props.className,
      childrenItems = props.childrenItems,
      isChild = props.isChild,
      openList = props.openList,
      disabled = props.disabled,
      onClickDisabled = props.onClickDisabled,
      onClick = props.onClick,
      handleProps = _objectWithoutProperties(props, _excluded);

  var classes = getClasses();
  var hasChildren = getValidChildren(childrenItems).length > 0;

  var _useState = useState(handleProps.isSelected || openList),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var getClickProps = function getClickProps() {
    if (disabled && onClickDisabled) {
      return {
        className: classnames(classes.disabledClass, className),
        onClick: onClickDisabled
      };
    }

    if (disabled) {
      return {
        className: classnames(classes.disabledClass, className),
        disabled: disabled
      };
    }

    return {
      onClick: onClick
    };
  };

  if (isChild) {
    return /*#__PURE__*/React.createElement(ListItem, {
      padding: false
    }, /*#__PURE__*/React.createElement(SidebarHandle, _extends({
      isChild: true
    }, handleProps, getClickProps())));
  }

  if (hasChildren) {
    var hanldeClick = function hanldeClick() {
      var _handleProps$onClick;

      setOpen(!open);
      (_handleProps$onClick = handleProps.onClick) === null || _handleProps$onClick === void 0 ? void 0 : _handleProps$onClick.call(handleProps);
    };

    return /*#__PURE__*/React.createElement(Dropdown, {
      Handle: /*#__PURE__*/React.createElement(SidebarHandle, _extends({}, handleProps, getClickProps(), {
        onClick: hanldeClick
      })),
      itemsList: childrenItems,
      isSidebarCollapsed: handleProps.isSidebarCollapsed,
      isOpen: open
    });
  }

  return /*#__PURE__*/React.createElement(SidebarHandle, _extends({}, handleProps, getClickProps()));
};

SidebarItem.propTypes = {
  name: PropTypes.string,
  className: PropTypes.string,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  isSelected: PropTypes.bool,
  color: PropTypes.string,
  childrenItems: PropTypes.oneOfType([PropTypes.instanceOf(Array), PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  isChild: PropTypes.bool,
  onClick: PropTypes.func,
  isSidebarCollapsed: PropTypes.bool,
  label: PropTypes.string,
  openList: PropTypes.bool,
  component: PropTypes.elementType
};
SidebarItem.defaultProps = {
  name: "",
  className: "",
  icon: "",
  color: "primary",
  isSelected: false,
  childrenItems: [],
  isChild: false,
  isSidebarCollapsed: false,
  label: "",
  openList: false,
  component: "button"
};
export default SidebarItem;