import React, { memo } from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import { identity } from 'ramda';
import { isNested } from '@reltio/mdm-sdk';
import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import MenuItem from '@mui/material/MenuItem';
import RecommendedIcon from '../icons/Recommended';
import { AttrTypeIcon } from './components/AttrTypeIcon';
import { RequiredMark } from '../RequiredMark';
import { Marginator } from '../Marginator';
import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
import { withTooltip } from '../HOCs/withTooltip';
import { useStyles } from './styles';
export var RecommendedIconWithTooltip = withTooltip(RecommendedIcon);
var AttributeListItem = function (_a) {
    var _b, _c, _d;
    var groupId = _a.groupId, data = _a.data, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.isFocused, isFocused = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, label = _a.label, labelInText = _a.labelInText, level = _a.level, _h = _a.onClick, onClick = _h === void 0 ? identity : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j, _k = _a.hideIcon, hideIcon = _k === void 0 ? false : _k, _l = _a.notSelectable, notSelectable = _l === void 0 ? false : _l, _m = _a.disableHorizontalScrollbar, disableHorizontalScrollbar = _m === void 0 ? false : _m, _o = _a.style, style = _o === void 0 ? {} : _o, _p = _a.subItemMargin, subItemMargin = _p === void 0 ? 20 : _p, LogoIcon = _a.LogoIcon, className = _a.className, disableNonSelectable = _a.disableNonSelectable, disableGutters = _a.disableGutters;
    var styles = useStyles();
    var attrType = (data || {}).attrType;
    var isButton = (!hideCheckBox || !isNested(attrType)) && !notSelectable;
    var handleItemClick = function () { return onClick(data, !checked, groupId); };
    var showLogoIcon = !!LogoIcon;
    var renderIcon = function (attrType) {
        return groupId === 'recommended' ? (React.createElement(RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: i18n.text('Recommended'), showForDisabled: true })) : (React.createElement(AttrTypeIcon, { attrType: attrType }));
    };
    return (React.createElement(ExpandedValueTooltip, { value: labelInText || label, className: styles.itemTooltip, placement: "bottom-end" },
        React.createElement(MenuItem, { className: classnames(styles.container, styles.listItem, (_b = {}, _b[styles.defaultCursor] = !isButton, _b), className), onClick: isButton ? handleItemClick : undefined, style: style, dense: true, disabled: disableNonSelectable && notSelectable, classes: {
                focusVisible: styles.listItemFocus,
                selected: styles.listItemFocus
            }, selected: isFocused, tabIndex: -1, disableGutters: disableGutters },
            !hideCheckBox && (React.createElement(Checkbox, { checked: checked, disableRipple: true, disabled: !isButton, className: classnames(styles.checkbox, (_c = {}, _c[styles.checked] = checked, _c)), tabIndex: -1 })),
            React.createElement(Marginator, { margin: subItemMargin, level: level, className: styles.marginWrapper },
                React.createElement(React.Fragment, null,
                    !hideIcon && renderIcon(attrType),
                    React.createElement("div", { className: classnames(styles.itemTextWrapper, (_d = {}, _d[styles.marginText] = hideIcon, _d)) },
                        showLogoIcon && React.createElement(LogoIcon, { className: styles.logoIcon }),
                        React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
                                label,
                                isRequired && React.createElement(RequiredMark, null)), className: styles.itemText })))),
            isButton && disableHorizontalScrollbar && React.createElement("div", { className: styles.itemAfter }))));
};
AttributeListItem.defaultName = 'AttributeListItem';
export default memo(AttributeListItem);
