import React, { useCallback, useMemo } from 'react';
import { EntityAttrTypes, getAttributeValue } from '@reltio/mdm-sdk';
import { ChangeView } from '../ChangeView';
import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../helpers/common';
import { useCssVariableStyles } from '../../../../../hooks/useCssVariableStyles';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { DataTypeValue } from '../../../../../DataTypeValue';
import { RelationEntityLink } from '../../../RelationEntityLink';
import styles from './DiffRenderer.module.css';
export var DiffRenderer = function (_a) {
    var label = _a.label, level = _a.level, attributeType = _a.attributeType, relationType = _a.relationType, attributeValue = _a.attributeValue, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation;
    var variableStyles = useCssVariableStyles({
        '--level': level
    });
    var metadata = useMdmMetadata();
    var changeLabel = useMemo(function () {
        return (React.createElement("span", null,
            label,
            React.createElement(RelationEntityLink, { attributeOrRelationType: attributeType || relationType, attributeValue: attributeValue })));
    }, [label, attributeType, relationType, attributeValue]);
    var renderValue = useCallback(function (value) {
        var attrValue = getAttributeValue(value);
        var isRolesOrTags = attributeType.uri === EntityAttrTypes.roles.uri || attributeType.uri === EntityAttrTypes.tags.uri;
        var preparedValue = isRolesOrTags
            ? prepareRolesOrTagsValue(metadata, attrValue, attributeType.uri)
            : attrValue;
        return (React.createElement(DataTypeValue, { value: preparedValue, dataTypeDefinition: getDataTypeDefinition(attributeType, attrValue) }));
    }, [attributeType, metadata]);
    return (React.createElement("div", { className: styles.change, style: variableStyles },
        React.createElement(ChangeView, { label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation })));
};
