import React from 'react';
import { ShowMoreLink } from './components/ShowMoreLink';
import { DCRChangesList } from './components/DCRChangesList';
import { AttributesChangesContext } from './AttributesChangesContext';
import { useCollapsibleList } from './useCollapsibleList';
import { DCREntityUriLink } from '../DCREntityUriLink/DCREntityUriLink';
import { useChangesList } from '../hooks/useChangesList';
import styles from './AttributesChanges.module.css';
export var AttributesChanges = function (_a) {
    var changes = _a.changes, dcrUri = _a.dcrUri, objectsInfo = _a.objectsInfo, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo, max = _a.max;
    var changesList = useChangesList({ changes: changes, entityInfo: entityInfo, relationsInfo: relationsInfo });
    var _b = useCollapsibleList(changesList, max), isExpanded = _b.isExpanded, onToggle = _b.onToggle, itemsToShow = _b.itemsToShow, collapsedSuggestionsCount = _b.collapsedSuggestionsCount;
    return (React.createElement(AttributesChangesContext.Provider, { value: objectsInfo },
        React.createElement("div", { className: styles.container, "data-reltio-id": "changes-container" },
            React.createElement(DCREntityUriLink, { entityInfo: entityInfo, changes: changes, dcrUri: dcrUri }),
            React.createElement(DCRChangesList, { changes: itemsToShow }),
            collapsedSuggestionsCount > 0 && (React.createElement(ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink })))));
};
