var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useMemo } from 'react';
import i18n from 'ui-i18n';
import Typography from '@mui/material/Typography';
import { useContextSelector } from '@fluentui/react-context-selector';
import SvgSuggestedChanges from '../../../icons/SuggestedChanges';
import { EntityChangesGroup, SkeletonEntityChangesGroupLoader } from './components/EntityChangesGroup';
import { mergeAddedAttributesWithDCRChanges } from './helpers/mergeAddedAttributesWithDCRChanges';
import { AddedAttributesContext } from '../contexts/AddedAttributesContext';
import styles from './ChangeRequestEditor.module.css';
export var ChangeRequestEditor = function (_a) {
    var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
    var addedAttributes = useContextSelector(AddedAttributesContext, function (ctx) { return ctx.getAddedAttributes(); });
    var enrichedDCR = useMemo(function () {
        if (!(dcr === null || dcr === void 0 ? void 0 : dcr.changes))
            return null;
        var enrichedChanges = mergeAddedAttributesWithDCRChanges(dcr.changes, addedAttributes);
        return __assign(__assign({}, dcr), { changes: enrichedChanges });
    }, [dcr, addedAttributes]);
    var dcrLoaded = !!enrichedDCR && groupedObjects.length > 0;
    return (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.header },
            React.createElement("div", { className: styles.suggestedChangesIcon },
                React.createElement(SvgSuggestedChanges, null)),
            React.createElement(Typography, { variant: "h6", className: styles.suggestedChangesTitle }, i18n.text('Suggested changes'))),
        dcrLoaded ? (groupedObjects.map(function (object, index) { return (React.createElement(EntityChangesGroup, { key: "entity-".concat(index), entityInfo: object.entity, relationsInfo: object.relations, task: task, dcr: enrichedDCR })); })) : (React.createElement(SkeletonEntityChangesGroupLoader, null))));
};
