import React from 'react';
import ListItemText from '@mui/material/ListItemText';
import { getCrosswalkColor, getCrosswalkId, getSourceSystemLabel } from '@reltio/mdm-sdk';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { useCrosswalkHighlight } from '../../../../../contexts/CrosswalksDisplayContext';
import { SourceIcon } from '../../../../../SourceIcon';
import { ColoredBlock } from '../../../ColoredBlock';
import { useStyles } from './styles';
export var WinnerSource = function (_a) {
    var crosswalk = _a.crosswalk;
    var styles = useStyles();
    var metadata = useMdmMetadata();
    var _b = useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
    return (React.createElement(ColoredBlock, { className: styles.root, color: isDimmed ? 'rgba(0, 0, 0, 0.12)' : getCrosswalkColor(getCrosswalkId(crosswalk)), opacity: isDimmed ? 0.38 : 1, onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
        React.createElement(SourceIcon, { className: styles.icon, sourceType: crosswalk.type }),
        React.createElement(ListItemText, { primary: getSourceSystemLabel(metadata, crosswalk.type), primaryTypographyProps: { variant: 'body2' }, classes: { primary: styles.label } })));
};
