import React, { useCallback, useState } from 'react';
import { ArrowExpandButton } from '../ArrowExpandButton';
import { SimpleMatchRules } from '../SimpleMatchRules';
import { SimpleMatchRulesBuilder } from '../SimpleMatchRulesBuilder';
import { useStyles } from './styles';
export var TransitiveMatchRule = function (_a) {
    var label = _a.label, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
    var styles = useStyles();
    var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
    var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
    return (React.createElement("div", { "data-reltio-id": "transitive-match-rule", className: styles.container },
        React.createElement("div", { onClick: handleOnExpand, className: styles.badge },
            React.createElement(ArrowExpandButton, { expanded: expanded }),
            React.createElement("div", { className: styles.label }, label)),
        expanded ? (React.createElement(SimpleMatchRulesBuilder, { Component: SimpleMatchRules, matchRules: matchRules, matchRuleSummaries: matchRuleSummaries, className: styles.matchLabels })) : null));
};
