import React from "react";
import cls from "classnames";
import { classes } from "../../NavigationDrawer.tokens";
import { ExtraCounter, IconWrapper, Icon, StyledIndicator, RightContentWrapper, ContentLeftWrapper, Label, Link } from "./MenuItem.styles";
export const MenuItem = (props)=>{
    const { onClick, href, target, disabled, selected, icon, contentLeft, withContentLeft, label, isOpen, hasIndicator, counter } = props;
    const onMenuClick = typeof onClick === 'function' && !disabled ? onClick : undefined;
    const hasCustomContentLeft = contentLeft && withContentLeft;
    const menuClasses = cls(classes.navigationDrawerMenuItem, selected && classes.navigationDrawerMenuItemSelected, disabled && classes.navigationDrawerMenuItemDisabled, hasCustomContentLeft && classes.navigationDrawerMenuItemContentLeft, !withContentLeft && classes.navigationDrawerMenuItemWithoutContentLeft);
    const indicators = /*#__PURE__*/ React.createElement(React.Fragment, null, hasIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
        className: cls(withContentLeft && classes.navigationDrawerMenuIndicator)
    }), counter !== undefined && /*#__PURE__*/ React.createElement(ExtraCounter, {
        className: cls(withContentLeft && classes.navigationDrawerMenuCounter),
        count: counter
    }));
    const contentLeftItem = contentLeft ? /*#__PURE__*/ React.createElement(ContentLeftWrapper, null, contentLeft, indicators) : null;
    const iconItem = icon ? /*#__PURE__*/ React.createElement(IconWrapper, null, /*#__PURE__*/ React.createElement(Icon, null, icon), indicators) : null;
    const menuItemContent = withContentLeft ? /*#__PURE__*/ React.createElement(React.Fragment, null, contentLeft && contentLeftItem, icon && iconItem, isOpen && /*#__PURE__*/ React.createElement(Label, null, label)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(RightContentWrapper, null, indicators));
    return typeof onClick === 'function' ? /*#__PURE__*/ React.createElement("div", {
        className: menuClasses,
        onClick: onMenuClick
    }, menuItemContent) : /*#__PURE__*/ React.createElement(Link, {
        className: cls(classes.navigationDrawerMenuLink, menuClasses),
        href: href,
        rel: "noopener noreferrer",
        target: target
    }, menuItemContent);
};
