import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["icon"],
    _excluded2 = ["name", "icon", "color", "className", "isSelected", "isSidebarCollapsed", "label", "openList", "component", "isChild", "endIcon"];
import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import DeprecatedIcon from "../../Icon";
import Typography from "../../Typography";
import ListItem from "../../List/Item";
import Tooltip from "../../Tooltip";
import IconButton from "../../IconButton";
import getClasses from "./styles";
import CssFlex from "../../CssFlex";

var Icon = function Icon(_ref) {
  var icon = _ref.icon,
      props = _objectWithoutProperties(_ref, _excluded);

  if (typeof icon === "string") {
    return /*#__PURE__*/React.createElement(DeprecatedIcon, _extends({
      icon: icon
    }, props));
  }

  return /*#__PURE__*/React.cloneElement(icon, props, null);
};

var SidebarHandle = function SidebarHandle(props) {
  var _classnames;

  var name = props.name,
      icon = props.icon,
      color = props.color,
      className = props.className,
      isSelected = props.isSelected,
      isSidebarCollapsed = props.isSidebarCollapsed,
      label = props.label,
      openList = props.openList,
      component = props.component,
      isChild = props.isChild,
      endIcon = props.endIcon,
      otherProps = _objectWithoutProperties(props, _excluded2);

  var classes = getClasses({
    color: color
  });
  return /*#__PURE__*/React.createElement(ListItem, _extends({
    component: component,
    type: component === "button" ? "button" : undefined,
    hoverSelect: !isSidebarCollapsed,
    className: classnames(className, (_classnames = {}, _defineProperty(_classnames, classes.selectItemCollapsed, isSidebarCollapsed), _defineProperty(_classnames, classes.selectItemHover, !isSidebarCollapsed), _defineProperty(_classnames, classes.selectedSection, isSelected && !isChild), _classnames), classes.selectItem)
  }, otherProps), !!isSidebarCollapsed && /*#__PURE__*/React.createElement(Tooltip, {
    title: name
  }, /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(Icon, {
      icon: icon
    }),
    color: isSelected ? color : "neutral",
    className: classnames(classes.iconButton, "js-sidebar-item-icon-left")
  })), !isSidebarCollapsed && /*#__PURE__*/React.createElement("div", {
    className: isChild ? classes.iconOpenChild : classes.iconOpen
  }, /*#__PURE__*/React.createElement(Icon, {
    className: classnames(classes.iconSize, "js-sidebar-item-icon-left"),
    icon: icon,
    color: isSelected ? color : "neutral",
    shade: isSelected ? 500 : 400
  })), !isSidebarCollapsed && /*#__PURE__*/React.createElement(Typography, {
    variant: isChild ? "inputText" : "title2",
    weight: "bold",
    shade: isSelected ? 700 : 400,
    className: classes.marginNone
  }, name), typeof label === "string" && label !== "" && /*#__PURE__*/React.createElement(Typography, {
    component: "span",
    color: color,
    weight: "bold",
    variant: "f1-8",
    className: classnames(classes.label, classes.marginNone)
  }, label), /*#__PURE__*/React.isValidElement(label) && /*#__PURE__*/React.createElement(CssFlex, {
    ml: "xs",
    mb: "xs"
  }, label), endIcon);
};

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