import React from 'react';
import classnames from 'classnames';
import { isCrosswalkDisabled } from '@reltio/mdm-sdk';
import { SourceItem } from '../../../SourceItem';
import { useCrosswalkColor, useCrosswalkHighlight } from '../../../contexts/CrosswalksDisplayContext';
import { LightArrowTooltip } from '../../../LightArrowTooltip';
import { useStyles } from './styles';
export var CrosswalkIcon = function (_a) {
    var crosswalk = _a.crosswalk, className = _a.className;
    var color = useCrosswalkColor(crosswalk);
    var isDisabled = isCrosswalkDisabled(crosswalk);
    var _b = useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
    var styles = useStyles({ isOpaque: !isDimmed, color: isDimmed ? 'rgba(0, 0, 0, 0.12)' : color, isDisabled: isDisabled });
    return (React.createElement(LightArrowTooltip, { title: React.createElement(SourceItem, { crosswalk: crosswalk, color: color }), placement: 'top' },
        React.createElement("div", { "data-reltio-id": "crosswalk-icon", className: classnames(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
};
