import React from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { either, prop } from 'ramda';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
import { SmallIconButton } from '../../../SmallIconButton';
import styles from './AttributeTitle.module.css';
var defaultGetLabel = either(prop('title'), prop('fieldName'));
export var AttributeTitle = function (_a) {
    var _b, _c, _d;
    var value = _a.value, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, onSelectAttributeClick = _a.onSelectAttributeClick, _f = _a.disabled, disabled = _f === void 0 ? false : _f;
    var label = value && getLabel(value);
    return (React.createElement("div", { onClick: disabled ? undefined : onSelectAttributeClick, className: classnames(styles.attribute, (_b = {},
            _b[styles.attributeWithValue] = !!label,
            _b), (_c = {}, _c[styles.disabled] = disabled, _c)) },
        React.createElement(ExpandedValueTooltip, { value: label },
            React.createElement("div", { className: classnames(styles.name, (_d = {}, _d[styles.disabled] = disabled, _d)) }, label || React.createElement("span", { className: styles.noSelect }, i18n.text('Select attribute')))),
        React.createElement(SmallIconButton, { size: 'M', icon: ArrowDropDownIcon, disabled: disabled })));
};
