import React, { useCallback } from 'react';
import classnames from 'classnames';
import { pipe } from 'ramda';
import { getErrorId } from '@reltio/mdm-sdk';
import { AttributeTitle } from '../../../AttributeTitle';
import { DescriptionIcon } from '../../../DescriptionIcon';
import { ImageAttributesLineEditor } from '../../../ImageAttributesLineEditor';
import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';
import { useScrollToAttributeError } from '../../../hooks/useScrollToAttributeError';
import { ErrorWrapper } from '../../../ErrorWrapper';
import { useStyles } from '../../styles';
export var ImageLineRenderer = function (_a) {
    var attributeType = _a.attributeType, attributeValues = _a.attributeValues, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, highlightedAttribute = _a.highlightedAttribute, error = _a.error, highlightedError = _a.highlightedError, onDeactivateError = _a.onDeactivateError;
    var styles = useStyles();
    var label = attributeType.label, description = attributeType.description, isRequired = attributeType.required;
    var _b = useScrollToAttribute(highlightedAttribute), highlightedRef = _b.ref, highlightedClassName = _b.highlightedClassName;
    var _c = useScrollToAttributeError({ highlightedError: highlightedError }), errorRef = _c.ref, errorClassName = _c.errorClassName;
    var deactivateError = useCallback(function () {
        if (error && !!onDeactivateError) {
            onDeactivateError(getErrorId(error));
        }
    }, [error, onDeactivateError]);
    return (React.createElement("div", { ref: highlightedRef, className: classnames(styles.wrapper, highlightedClassName) },
        React.createElement("div", { ref: errorRef, className: classnames(styles.imagesWrapper, errorClassName) },
            React.createElement("div", { className: styles.titleWrapper },
                React.createElement(AttributeTitle, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label", isRequired: isRequired }),
                React.createElement(DescriptionIcon, { description: description })),
            React.createElement(ErrorWrapper, { errorMessage: error === null || error === void 0 ? void 0 : error.message, className: styles.errorWrapper },
                React.createElement(ImageAttributesLineEditor, { attributeValues: attributeValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: pipe(onChangeAttribute, deactivateError), requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })))));
};
