"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PotentialMatchField = void 0;
var react_1 = __importDefault(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var EntityUriLink_1 = require("../../../../../EntityUriLink");
var CollapsibleItemsContext_1 = require("../../../contexts/CollapsibleItemsContext");
var MoreItemsLink_1 = require("../../../MoreItemsLink");
var Field_1 = require("../../../Field");
var helpers_1 = require("./helpers");
var styles_1 = require("./styles");
var PotentialMatchField = function (_a) {
    var _b = _a.item, id = _b.id, data = _b.data;
    var styles = (0, styles_1.useStyles)();
    var matches = (data === null || data === void 0 ? void 0 : data.potentialMatches) || (data === null || data === void 0 ? void 0 : data.newUri);
    var _c = (0, CollapsibleItemsContext_1.useCollapsibleItems)({
        itemsId: id,
        items: matches.split(',')
    }), onExpand = _c.onExpand, collapsedItemsCount = _c.collapsedItemsCount, itemsToShow = _c.itemsToShow;
    var type = data === null || data === void 0 ? void 0 : data.type;
    return (react_1.default.createElement(Field_1.Field, { fieldName: (0, helpers_1.getFieldName)(type), "data-reltio-id": "potential-matches-field" },
        itemsToShow
            .map(function (url, index) { return (react_1.default.createElement(EntityUriLink_1.EntityUriLink, { key: index, value: url, className: styles.link }, (0, mdm_sdk_1.getLabel)(data[url]))); })
            .reduce(function (prev, curr) { return [prev, ', ', curr]; }),
        collapsedItemsCount ? (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("span", { className: styles.andLabel },
                " ",
                ui_i18n_1.default.text('and'),
                " "),
            react_1.default.createElement(MoreItemsLink_1.MoreItemsLink, { itemsCount: collapsedItemsCount, itemsLabel: collapsedItemsCount === 1 ? ui_i18n_1.default.text('match') : ui_i18n_1.default.text('matches'), onClick: onExpand, className: styles.expandLabel }))) : null));
};
exports.PotentialMatchField = PotentialMatchField;
