"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SourceItem = void 0;
var react_1 = __importDefault(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var classnames_1 = __importDefault(require("classnames"));
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
var SourceIcon_1 = require("../SourceIcon");
var CrosswalksDisplayContext_1 = require("../contexts/CrosswalksDisplayContext");
var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
var SmallIconButton_1 = require("../SmallIconButton");
var styles_1 = require("./styles");
var SourceItem = function (_a) {
    var crosswalk = _a.crosswalk, color = _a.color, className = _a.className, _b = _a.focusable, focusable = _b === void 0 ? false : _b;
    var _c = (0, CrosswalksDisplayContext_1.useCrosswalkFocus)(crosswalk), toggleCrosswalkFocus = _c.toggleCrosswalkFocus, isFocused = _c.isFocused;
    var styles = (0, styles_1.useStyles)({ color: color, isFocused: isFocused });
    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
    var label = (0, mdm_sdk_1.getSourceSystemLabel)(metadata, crosswalk.type);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.sourceItem, className) },
        react_1.default.createElement(SourceIcon_1.SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
        react_1.default.createElement("div", { className: styles.sourceInfo },
            react_1.default.createElement("div", null,
                react_1.default.createElement("span", { className: styles.label }, label),
                focusable && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Visibility_1.default, className: styles.eyeIcon, size: 'XXS', tooltipTitle: ui_i18n_1.default.text('Focus'), onClick: function () { return toggleCrosswalkFocus(); } }))),
            react_1.default.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
};
exports.SourceItem = SourceItem;
