import React, { useMemo } from 'react';
import { clone } from 'ramda';
import i18n from 'ui-i18n';
import Typography from '@mui/material/Typography';
import { addLineIdToValue } from './helpers/helpers';
import SvgSuggestedChanges from '../../../icons/SuggestedChanges';
import { EntityChangesGroup, SkeletonEntityChangesGroupLoader } from './components/EntityChangesGroup';
import styles from './ChangeRequestEditor.module.css';
export var ChangeRequestEditor = function (_a) {
    var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
    var enrichedDCR = useMemo(function () {
        if (dcr === null || dcr === void 0 ? void 0 : dcr.changes) {
            var cloned = clone(dcr);
            cloned.changes = addLineIdToValue(cloned.changes);
            return cloned;
        }
        return null;
    }, [dcr]);
    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))));
};
