import React from 'react';
import i18n from 'ui-i18n';
import { DeltaField } from './components/DeltaField';
import { SegmentDeltaField } from './components/SegmentDeltaField';
import { useCollapsibleItems } from '../contexts/CollapsibleItemsContext';
import { MoreItemsLink } from '../MoreItemsLink';
import { useStyles } from './styles';
export var RecordUpdates = function (_a) {
    var updates = _a.updates, recordId = _a.recordId, isSegment = _a.isSegment;
    var styles = useStyles();
    var _b = useCollapsibleItems({
        itemsId: recordId,
        items: updates
    }), onExpand = _b.onExpand, collapsedItemsCount = _b.collapsedItemsCount, itemsToShow = _b.itemsToShow;
    var DeltaFieldComponent = isSegment ? SegmentDeltaField : DeltaField;
    return (React.createElement(React.Fragment, null,
        itemsToShow.map(function (update, index) { return (React.createElement(DeltaFieldComponent, { key: index, delta: update })); }),
        collapsedItemsCount ? (React.createElement(MoreItemsLink, { itemsCount: collapsedItemsCount, itemsLabel: collapsedItemsCount === 1 ? i18n.text('update') : i18n.text('updates'), onClick: onExpand, className: styles.moreLabel })) : null));
};
