import React, { useCallback, useState } from 'react';
import i18n from 'ui-i18n';
import { MatchRulesTooltip } from '../MatchRulesTooltip';
import { SimpleMatchRules } from '../SimpleMatchRules';
import { MatchRulesBadge } from '../MatchRulesBadge';
import { withTooltip } from '../HOCs/withTooltip';
import AIPowered from '../icons/AIPowered';
import { useStyles } from './styles';
export var MatchRuleBadgeWithTooltip = withTooltip(MatchRulesBadge);
export var SimpleMatchRulesBlock = function (_a) {
    var _b = _a.isMlMatch, isMlMatch = _b === void 0 ? false : _b, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
    var styles = useStyles();
    var _c = useState(false), expanded = _c[0], setExpanded = _c[1];
    var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
    return (React.createElement("div", { className: styles.container, "data-reltio-id": "simple-match-rules-block" },
        React.createElement(MatchRuleBadgeWithTooltip, { tooltipTitle: React.createElement(MatchRulesTooltip, { matchRules: matchRules, isMlMatch: isMlMatch }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, isMlMatch ? (React.createElement(React.Fragment, null,
            React.createElement(AIPowered, { className: styles.icon }),
            i18n.text('AI-powered'))) : (i18n.text('Rules'))),
        expanded ? (React.createElement(SimpleMatchRules, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch, matchRuleSummaries: matchRuleSummaries })) : null));
};
