import React from 'react';
import { isNil } from 'ramda';
import EastIcon from '@mui/icons-material/East';
import { DCROperationTypes, getAttributeValue } from '@reltio/mdm-sdk';
import { getDataTypeDefinition } from '../../../../helpers/common';
import { DataTypeValue } from '../../../../../../DataTypeValue';
import { ChangeItemLabel } from '../../ChangeItemLabel';
import editorStyles from '../editors.module.css';
import styles from './ChangeItemOldValue.module.css';
export var ChangeItemOldValue = function (_a) {
    var change = _a.change;
    var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
    var oldValue = getAttributeValue(change.oldValue);
    var newValue = getAttributeValue(change.newValue);
    var dataTypeDefinition = change.attributeType && getDataTypeDefinition(change.attributeType, newValue !== null && newValue !== void 0 ? newValue : oldValue);
    var hasOldValue = !isNil(oldValue);
    return (React.createElement("div", { className: editorStyles.attributeRow },
        React.createElement(ChangeItemLabel, { change: change, className: editorStyles.labelColumn }),
        React.createElement("div", { className: editorStyles.valueColumn }, isUpdateOperation && hasOldValue && (React.createElement("div", { className: styles.previousValue },
            React.createElement("span", { className: styles.previousValueText },
                React.createElement(DataTypeValue, { value: oldValue, dataTypeDefinition: dataTypeDefinition })),
            React.createElement("span", { className: styles.arrow },
                React.createElement(EastIcon, null))))),
        React.createElement("div", { className: editorStyles.revertColumn }),
        React.createElement("div", { className: editorStyles.operationColumn })));
};
