import React from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { getMatchRuleSummary, formatRelevanceScore } from '@reltio/mdm-sdk';
import Tooltip from '@mui/material/Tooltip';
import NegativeRuleIcon from '../icons/NegativeRuleIcon';
import { useStyles } from './styles';
export var SimpleMatchRules = function (_a) {
    var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className, matchRuleSummaries = _a.matchRuleSummaries;
    var styles = useStyles();
    var hasMatchRules = matchRules.length > 0;
    var showTitle = !isMlMatch && hasMatchRules;
    return (React.createElement("div", { "data-reltio-id": "simple-match-rules", className: classnames(styles.container, className) },
        React.createElement("div", { className: showTitle ? styles.bodyWithMargin : styles.bodyWithoutMargin },
            showTitle && React.createElement("div", { className: styles.title }, i18n.text('Match rules')),
            React.createElement("div", { className: styles.labelsContainer }, hasMatchRules
                ? matchRules.map(function (matchRule) {
                    var matchRuleSummary = getMatchRuleSummary(matchRuleSummaries, matchRule.uri);
                    var relevancePercentage = formatRelevanceScore(matchRuleSummary);
                    return (React.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
                        React.createElement("div", { className: styles.matchRuleLabel },
                            "\u2022\u00A0",
                            matchRule.negativeRule && (React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon })), "".concat(matchRule.label)),
                        relevancePercentage && (React.createElement(Tooltip, { title: i18n.text('Relevance score') },
                            React.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));
                })
                : null))));
};
