import React, { cloneElement, } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftIcon, } from '../icon';
const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
    if (href) {
        return (React.createElement("a", Object.assign({ className: className, href: href, onClick: onClick, role: "menuitem" }, rest), children));
    }
    if (onClick) {
        return (React.createElement("button", Object.assign({ type: "button", className: className, onClick: onClick, role: "menuitem" }, rest), children));
    }
    return (React.createElement("div", Object.assign({ className: className, "aria-label": children }, rest), children));
};
export const SoftSideNavItem = ({ isOpen, isSelected, isParent, icon, onClick, href, items, children, depth, renderItem = defaultRenderItem, ...rest }) => {
    let childItems;
    if (items && isOpen) {
        childItems = (React.createElement("div", { className: "softSideNavItem__items" }, items));
    }
    let buttonIcon;
    if (icon) {
        buttonIcon = cloneElement(icon, {
            className: 'softSideNavItemButton__icon',
        });
    }
    const classes = classNames('softSideNavItem', {
        'softSideNavItem--root': depth === 0,
        'softSideNavItem--rootIcon': depth === 0 && icon,
        'softSideNavItem--trunk': depth === 1,
        'softSideNavItem--branch': depth > 1,
        'softSideNavItem--hasChildItems': !!childItems
    });
    const buttonClasses = classNames('softSideNavItemButton', {
        'softSideNavItemButton--isClickable': onClick || href,
        'softSideNavItemButton-isOpen': depth > 0 && isOpen && !isSelected,
        'softSideNavItemButton-isSelected': isSelected,
    });
    let caret;
    if (depth > 0 && isParent && !isOpen && !isSelected) {
        caret = React.createElement(SoftIcon, { type: "arrowDown", color: "subdued", size: "s" });
    }
    const buttonContent = (React.createElement("span", { className: "softSideNavItemButton__content" },
        buttonIcon,
        React.createElement("span", { className: "softSideNavItemButton__label" }, children),
        caret));
    return (React.createElement("div", { className: classes },
        renderItem({ href, onClick, className: buttonClasses, children: buttonContent, ...rest }),
        childItems));
};
// @ts-ignore
SoftSideNavItem.propTypes = {
    isOpen: PropTypes.bool,
    isSelected: PropTypes.bool,
    isParent: PropTypes.bool,
    icon: PropTypes.node,
    onClick: PropTypes.func,
    href: PropTypes.string,
    items: PropTypes.node,
    children: PropTypes.node,
    depth: PropTypes.number,
    renderItem: PropTypes.func,
};
//# sourceMappingURL=SoftSideNavItem.js.map