import React from 'react';
import i18n from 'ui-i18n';
import { getLabel } from '@reltio/mdm-sdk';
import { EntityUriLink } from '../../../../../EntityUriLink';
import { useCollapsibleItems } from '../../../contexts/CollapsibleItemsContext';
import { MoreItemsLink } from '../../../MoreItemsLink';
import { Field } from '../../../Field';
import { getFieldName } from './helpers';
import { useStyles } from './styles';
export var PotentialMatchField = function (_a) {
    var _b = _a.item, id = _b.id, data = _b.data;
    var styles = useStyles();
    var matches = (data === null || data === void 0 ? void 0 : data.potentialMatches) || (data === null || data === void 0 ? void 0 : data.newUri);
    var _c = 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.createElement(Field, { fieldName: getFieldName(type), "data-reltio-id": "potential-matches-field" },
        itemsToShow
            .map(function (url, index) { return (React.createElement(EntityUriLink, { key: index, value: url, className: styles.link }, getLabel(data[url]))); })
            .reduce(function (prev, curr) { return [prev, ', ', curr]; }),
        collapsedItemsCount ? (React.createElement(React.Fragment, null,
            React.createElement("span", { className: styles.andLabel },
                " ",
                i18n.text('and'),
                " "),
            React.createElement(MoreItemsLink, { itemsCount: collapsedItemsCount, itemsLabel: collapsedItemsCount === 1 ? i18n.text('match') : i18n.text('matches'), onClick: onExpand, className: styles.expandLabel }))) : null));
};
