import React, { useMemo } from 'react';
import classnames from 'classnames';
import Skeleton from '@mui/material/Skeleton';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { calculateDCRChanges } from '../../helpers';
import { getOperationLabel } from '../../../helpers/common';
import styles from './DCRChangesSummary.module.css';
var ChangeItem = function (_a) {
    var count = _a.count, operation = _a.operation;
    return count > 0 && (React.createElement("div", { className: styles.changeItem },
        React.createElement("div", { className: classnames(styles.changeNumber, styles[operation]) }, count),
        React.createElement("div", { className: styles.changeLabel }, getOperationLabel(operation))));
};
var LoadingSkeleton = function () { return (React.createElement(React.Fragment, null, Array.from({ length: 4 }).map(function (_, index) { return (React.createElement("div", { key: "summary-changes-skeleton-".concat(index), className: styles.changeItem },
    React.createElement(Skeleton, { variant: "text", width: 24, height: 16, className: styles.changeNumber }),
    React.createElement(Skeleton, { variant: "text", width: 60, height: 13, className: styles.changeLabel }))); }))); };
export var DCRChangesSummary = function (_a) {
    var changes = _a.changes, groupedObjects = _a.groupedObjects;
    var metadata = useMdmMetadata();
    var dcrChanges = useMemo(function () { return (changes ? calculateDCRChanges(metadata, changes, groupedObjects) : null); }, [metadata, changes, groupedObjects]);
    var changesLoaded = !!dcrChanges && groupedObjects.length > 0;
    return (React.createElement("div", { className: styles.changesSummary, "data-reltio-id": "dcr-changes-summary" },
        !changesLoaded && React.createElement(LoadingSkeleton, null),
        changesLoaded &&
            Object.entries(dcrChanges).map(function (_a) {
                var operation = _a[0], count = _a[1];
                return (React.createElement(ChangeItem, { key: operation, count: count, operation: operation }));
            })));
};
