"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CrosswalkIcon = void 0;
var react_1 = __importDefault(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var SourceItem_1 = require("../../../SourceItem");
var CrosswalksDisplayContext_1 = require("../../../contexts/CrosswalksDisplayContext");
var LightArrowTooltip_1 = require("../../../LightArrowTooltip");
var styles_1 = require("./styles");
var CrosswalkIcon = function (_a) {
    var crosswalk = _a.crosswalk, className = _a.className;
    var color = (0, CrosswalksDisplayContext_1.useCrosswalkColor)(crosswalk);
    var isDisabled = (0, mdm_sdk_1.isCrosswalkDisabled)(crosswalk);
    var _b = (0, CrosswalksDisplayContext_1.useCrosswalkHighlight)(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
    var styles = (0, styles_1.useStyles)({ isOpaque: !isDimmed, color: isDimmed ? 'rgba(0, 0, 0, 0.12)' : color, isDisabled: isDisabled });
    return (react_1.default.createElement(LightArrowTooltip_1.LightArrowTooltip, { title: react_1.default.createElement(SourceItem_1.SourceItem, { crosswalk: crosswalk, color: color }), placement: 'top' },
        react_1.default.createElement("div", { "data-reltio-id": "crosswalk-icon", className: (0, classnames_1.default)(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
};
exports.CrosswalkIcon = CrosswalkIcon;
