import React, { useMemo } from 'react';
import classnames from 'classnames';
import Chip from '@mui/material/Chip';
import { DataTypeValue } from '../DataTypeValue';
import { withTooltip } from '../HOCs/withTooltip';
import { getAttributeValue, getLabel, isComplexAttribute, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
import styles from './RowCellChipWithTooltip.module.css';
var ChipWithTooltip = withTooltip(Chip);
export var RowCellChipWithTooltip = function (_a) {
    var className = _a.className, values = _a.values, dataTypeDefinition = _a.dataTypeDefinition;
    var tooltipTitle = useMemo(function () { return (React.createElement("div", null, values.map(function (value, i) { return (React.createElement("div", { key: i }, isComplexAttribute(dataTypeDefinition)
        ? getLabel(value.label)
        : wrapInArrayIfNeeded(value).map(function (value, index) { return (React.createElement(DataTypeValue, { key: index, value: getAttributeValue(value), dataTypeDefinition: dataTypeDefinition, rich: false })); }))); }))); }, [values, dataTypeDefinition]);
    return (React.createElement(ChipWithTooltip, { tooltipTitle: tooltipTitle, label: '+ ' + values.length, variant: "outlined", classes: {
            root: classnames(styles.rowCellChip, className),
            label: styles.rowCellChipLabel
        } }));
};
