import React, { memo } from 'react';
import classnames from 'classnames';
import Tooltip from '@mui/material/Tooltip';
import { getSourceSystemLabel } from '@reltio/mdm-sdk';
import { useMdmMetadata } from '../contexts/MdmModuleContext';
import { useCrosswalkColor } from '../contexts/CrosswalksDisplayContext';
import { SourceIcon } from '../SourceIcon';
import { useStyles } from './styles';
var ColoredSourceIcon = function (_a) {
    var className = _a.className, crosswalk = _a.crosswalk, _b = _a.showTooltip, showTooltip = _b === void 0 ? true : _b;
    var styles = useStyles();
    var color = useCrosswalkColor(crosswalk);
    var metadata = useMdmMetadata() || {};
    var content = (React.createElement("div", { className: classnames(styles.itemContainer, className), style: { background: color } },
        React.createElement(SourceIcon, { sourceType: crosswalk.type, className: styles.item })));
    return showTooltip ? React.createElement(Tooltip, { title: getSourceSystemLabel(metadata, crosswalk.type) }, content) : content;
};
export default memo(ColoredSourceIcon);
