import React, { useMemo } from 'react';
import classnames from 'classnames';
import { isNil } from 'ramda';
import i18n from 'ui-i18n';
import ReplayIcon from '@mui/icons-material/Replay';
import Button from '@mui/material/Button';
import { DCROperationTypes, EntityAttrTypes, getAttributeValue, getEntityType, isImage } from '@reltio/mdm-sdk';
import { useMdmEntity, useMdmMetadata } from '../../../../../../contexts/MdmModuleContext';
import { DataTypeValue } from '../../../../../../DataTypeValue';
import { SmallIconButton } from '../../../../../../SmallIconButton';
import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../../helpers/common';
import { checkCanInitiateChangeRequest } from '../../../helpers/helpers';
import { OperationChip } from '../../../../OperationChip';
import { RelationEntityLink } from '../../../../RelationEntityLink';
import { useChangeRequestEditor } from '../../../hooks/useChangeRequestEditor';
import { useDcrReviewAllowAddAttributes } from '../../../hooks/useDcrReviewAllowAddAttributes';
import { ChangeItemLabel } from '../../ChangeItemLabel';
import { DCRValueEditor } from '../../DCRValueEditor';
import { EditorStatus, EditorStatusChip } from '../../EditorStatusChip';
import { AddSameAttributeButton } from '../../AddSameAttributeButton/AddSameAttributeButton';
import { DCRImageEditor } from '../../DCRImageEditor';
import editorStyles from '../editors.module.css';
import styles from './ChangeItemEditor.module.css';
export var ChangeItemEditor = function (_a) {
    var _b, _c, _d, _e, _f;
    var change = _a.change, _g = _a.editable, editable = _g === void 0 ? true : _g, classes = _a.classes;
    var metadata = useMdmMetadata();
    var _h = useChangeRequestEditor({ change: change }), handleChange = _h.handleChange, handleReject = _h.handleReject, handleRevert = _h.handleRevert, handleImageUpload = _h.handleImageUpload, lineData = _h.lineData, isLineRejected = _h.isLineRejected, isParentLineRejected = _h.isParentLineRejected, isUpdated = _h.isUpdated, hasChangeId = _h.hasChangeId, isSubAttributeOfDeletedAttribute = _h.isSubAttributeOfDeletedAttribute;
    var entity = useMdmEntity();
    var entityType = getEntityType(metadata, entity === null || entity === void 0 ? void 0 : entity.type);
    var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
    var isAddOperation = change.operation === DCROperationTypes.ADDED;
    var isDeletedOperation = change.operation === DCROperationTypes.DELETED;
    var oldValue = getAttributeValue(change.oldValue);
    var currentNewValue = !isNil(lineData === null || lineData === void 0 ? void 0 : lineData.value) && !isParentLineRejected ? lineData.value : change.newValue;
    var newValue = getAttributeValue(currentNewValue);
    var hasNewValue = !isNil(newValue);
    var dataTypeDefinition = useMemo(function () {
        return change.attributeType && getDataTypeDefinition(change.attributeType, newValue || oldValue);
    }, [change.attributeType, newValue, oldValue]);
    var isImageType = isImage(change === null || change === void 0 ? void 0 : change.attributeType);
    var isRolesOrTags = ((_b = change === null || change === void 0 ? void 0 : change.attributeType) === null || _b === void 0 ? void 0 : _b.uri) === EntityAttrTypes.roles.uri ||
        ((_c = change === null || change === void 0 ? void 0 : change.attributeType) === null || _c === void 0 ? void 0 : _c.uri) === EntityAttrTypes.tags.uri;
    var allowAddAttributes = useDcrReviewAllowAddAttributes();
    var canEdit = checkCanInitiateChangeRequest(metadata, entityType, change);
    var shouldShowValueEditor = (isUpdateOperation || isAddOperation) && editable && canEdit;
    var isRejected = isLineRejected || isParentLineRejected;
    var shouldShowAddButton = allowAddAttributes && shouldShowValueEditor && ((_d = change.displayOptions) === null || _d === void 0 ? void 0 : _d.showAddButton) && !isRejected;
    var preparedValue = useMemo(function () {
        return isRolesOrTags
            ? prepareRolesOrTagsValue(metadata, newValue, change.attributeType.uri)
            : newValue;
    }, [isRolesOrTags, metadata, newValue, (_e = change.attributeType) === null || _e === void 0 ? void 0 : _e.uri]);
    var showUndoButton = (isUpdated || isLineRejected) && !isParentLineRejected;
    var showRejectButton = canEdit &&
        !isLineRejected &&
        !isUpdated &&
        !isParentLineRejected &&
        hasChangeId &&
        !isSubAttributeOfDeletedAttribute &&
        !(change.isReferenceSubAttribute && !editable);
    var showStatusChips = !isParentLineRejected;
    var isImageEditorDisabled = isRejected || isDeletedOperation;
    var getEditorStatus = function () {
        if (isLineRejected)
            return EditorStatus.REJECTED;
        if (isUpdated)
            return EditorStatus.UPDATED;
        return undefined;
    };
    return (React.createElement("div", { className: editorStyles.attributeRow, "data-reltio-id": "change-item-editor" },
        React.createElement(ChangeItemLabel, { change: change, className: editorStyles.labelColumn, showLabel: (_f = change.displayOptions) === null || _f === void 0 ? void 0 : _f.showLabel }),
        React.createElement("div", { className: editorStyles.valueColumn },
            React.createElement(RelationEntityLink, { attributeOrRelationType: change.attributeType || change.relationType, attributeValue: change.attributeValue, className: styles.relationEntityLink }),
            isImageType ? (React.createElement(DCRImageEditor, { change: change, onUpload: handleImageUpload, disabled: isImageEditorDisabled })) : shouldShowValueEditor ? (React.createElement(DCRValueEditor, { attributeType: change.attributeType, value: currentNewValue, onChange: handleChange, disabled: !editable || isRejected })) : (hasNewValue && (React.createElement("div", { className: styles.value },
                React.createElement(DataTypeValue, { value: preparedValue, dataTypeDefinition: dataTypeDefinition }))))),
        React.createElement("div", { className: editorStyles.addSameAttributeColumn }, shouldShowAddButton && React.createElement(AddSameAttributeButton, { change: change })),
        React.createElement("div", { className: editorStyles.revertColumn }, showUndoButton && (React.createElement(SmallIconButton, { icon: ReplayIcon, onClick: handleRevert, className: styles.revertButton, title: i18n.text('Undo'), size: "S" }))),
        React.createElement("div", { className: editorStyles.operationColumn }, change.operation && React.createElement(OperationChip, { operation: change.operation, size: "small", variant: "outlined" })),
        React.createElement("div", { className: editorStyles.statusColumn }, showStatusChips && React.createElement(EditorStatusChip, { status: getEditorStatus() })),
        React.createElement("div", { className: editorStyles.rejectColumn }, showRejectButton && (React.createElement(Button, { onClick: handleReject, className: classnames(styles.rejectButton, classes === null || classes === void 0 ? void 0 : classes.rejectButton), title: i18n.text('Reject'), size: "medium" }, i18n.text('Reject'))))));
};
