import classnames from 'classnames';
import React, { useContext, useEffect, useRef } from 'react';
import { useContextSelector } from '@fluentui/react-context-selector';
import { DCROperationTypes, getAttributeValue } from '@reltio/mdm-sdk';
import { isEditableChange } from '../../helpers/helpers';
import { ChangeRequestEditorContext } from '../../../contexts/ChangeRequestEditorContext';
import { ChangeItemEditor, ChangeItemEditorRecentlyAdded, ChangeItemOldValue } from '../editors';
import { extractLineIds } from '../../../helpers/merge';
import { ErrorWrapper } from '../../../../../ErrorWrapper';
import { ScrollToElementContext, isHighlightedErrorType } from '../../../../../contexts/ScrollToElementContext';
import { useScrollToAttributeError } from '../../../../../hooks/useScrollToAttributeError';
import { getAddedId, isAddedAttribute } from '../../helpers/addedAttributes';
import { ScrollToAddedAttributeContext } from '../../../contexts/ScrollToAddedAttributeContext';
import styles from './ChangeItemRow.module.css';
export var ChangeItemRow = function (_a) {
    var _b;
    var _c;
    var change = _a.change, entityInfo = _a.entityInfo;
    var lineIds = change.lineIds || extractLineIds(change === null || change === void 0 ? void 0 : change.newValue);
    var isParentLineRejected = useContextSelector(ChangeRequestEditorContext, function (context) {
        return context.getIsParentLineRejected(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
    });
    var isLineRejected = useContextSelector(ChangeRequestEditorContext, function (context) {
        return context.getIsLineRejected(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
    });
    var isUpdated = useContextSelector(ChangeRequestEditorContext, function (context) {
        return context.getIsLineUpdated(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
    });
    var lineData = useContextSelector(ChangeRequestEditorContext, function (context) { return context.getLineData(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]); });
    var errorByLineId = useContextSelector(ChangeRequestEditorContext, function (context) {
        return context.getErrorByLineId(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
    });
    var error = errorByLineId === null || errorByLineId === void 0 ? void 0 : errorByLineId.error;
    var errorLineIds = (errorByLineId === null || errorByLineId === void 0 ? void 0 : errorByLineId.lineIds) || [];
    var scrollToElementContext = useContext(ScrollToElementContext);
    var highlightedError = scrollToElementContext === null || scrollToElementContext === void 0 ? void 0 : scrollToElementContext.element;
    var isHighlighted = isHighlightedErrorType(scrollToElementContext === null || scrollToElementContext === void 0 ? void 0 : scrollToElementContext.type) &&
        highlightedError &&
        errorLineIds.includes(highlightedError.uri);
    var _d = useScrollToAttributeError({
        highlightedError: isHighlighted ? scrollToElementContext : null,
        className: styles.changeItemRowWithError
    }), ref = _d.ref, errorClassName = _d.errorClassName;
    var addedId = getAddedId(change);
    var _e = useContext(ScrollToAddedAttributeContext), highlightedIds = _e.highlightedIds, scrollToFirst = _e.scrollToFirst;
    var isHighlightedAdded = !!addedId && highlightedIds.has(addedId);
    var scrollRef = useRef(null);
    useEffect(function () {
        if (isHighlightedAdded) {
            scrollToFirst(scrollRef);
        }
    }, [isHighlightedAdded, scrollToFirst]);
    var combinedRef = function (node) {
        ref.current = node;
        scrollRef.current = node;
    };
    var isEditedOperation = change.operation === DCROperationTypes.EDITED;
    var editable = isEditableChange(change, entityInfo);
    var isAdded = isAddedAttribute(change);
    var currentValue = (_c = lineData === null || lineData === void 0 ? void 0 : lineData.value) !== null && _c !== void 0 ? _c : change.newValue;
    var hasValue = !!getAttributeValue(currentValue);
    var isAddedWithValue = isAdded && hasValue;
    return (React.createElement("div", { ref: combinedRef, className: classnames(styles.changeItemRow, errorClassName, (_b = {},
            _b[styles.changedRow] = isUpdated && !isAdded,
            _b[styles.addedWithValueRow] = isAddedWithValue,
            _b[styles.rejectedRow] = isLineRejected || isParentLineRejected,
            _b[styles.highlightedRow] = isHighlightedAdded,
            _b)) },
        React.createElement(ErrorWrapper, { errorMessage: error === null || error === void 0 ? void 0 : error.message, classes: { helperText: styles.errorText } }, isAdded ? (React.createElement(ChangeItemEditorRecentlyAdded, { change: change, editable: editable })) : (React.createElement(React.Fragment, null,
            isEditedOperation && React.createElement(ChangeItemOldValue, { change: change }),
            React.createElement(ChangeItemEditor, { change: change, editable: editable, classes: { rejectButton: styles.rejectButton } }))))));
};
