import React from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { getSourceSystemLabel } from '@reltio/mdm-sdk';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { SourceIcon } from '../SourceIcon';
import { useCrosswalkFocus } from '../contexts/CrosswalksDisplayContext';
import { useMdmMetadata } from '../contexts/MdmModuleContext';
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
import { useStyles } from './styles';
export 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 = useCrosswalkFocus(crosswalk), toggleCrosswalkFocus = _c.toggleCrosswalkFocus, isFocused = _c.isFocused;
    var styles = useStyles({ color: color, isFocused: isFocused });
    var metadata = useMdmMetadata();
    var label = getSourceSystemLabel(metadata, crosswalk.type);
    return (React.createElement("div", { className: classnames(styles.sourceItem, className) },
        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
        React.createElement("div", { className: styles.sourceInfo },
            React.createElement("div", null,
                React.createElement("span", { className: styles.label }, label),
                focusable && (React.createElement(SmallIconButtonWithTooltip, { icon: VisibilityIcon, className: styles.eyeIcon, size: 'XXS', tooltipTitle: i18n.text('Focus'), onClick: function () { return toggleCrosswalkFocus(); } }))),
            React.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
};
