import React, { memo, useContext } from 'react';
import i18n from 'ui-i18n';
import { ErrorType } from '@reltio/mdm-sdk';
import Tooltip from '@mui/material/Tooltip';
import HyperlinkIcon from '../../../icons/Hyperlink';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
import { ScrollToElementContext } from '../../../contexts/ScrollToElementContext';
import { useMdmIsEditableMode, useMdmMetadata } from '../../../contexts/MdmModuleContext';
import { getDisplayedAttributeTypesPath, getDisplayedErrorMessage, getDisplayedErrorPath } from './helpers';
import { ReadOnlyError } from '../../../icons';
import { useStyles } from './styles';
export var AttributeErrorItem = memo(function (_a) {
    var error = _a.error, _b = _a.alwaysShowLink, alwaysShowLink = _b === void 0 ? false : _b;
    var styles = useStyles();
    var metadata = useMdmMetadata();
    var isEditableMode = useMdmIsEditableMode();
    var displayedMessage = getDisplayedErrorMessage(metadata, error);
    var displayedErrorPath = getDisplayedErrorPath(error);
    var displayedAttributeTypesPath = getDisplayedAttributeTypesPath(error);
    var highlightError = useContext(ScrollToElementContext).highlightError;
    var showLink = (error.uri || (error.parentUri && error.attributeTypeUri)) && (isEditableMode || alwaysShowLink);
    return (React.createElement("div", { className: styles.errorListItem },
        React.createElement("div", { className: styles.listItemMarker }, error.type === ErrorType.rdmIssueInReference ? (React.createElement(Tooltip, { title: i18n.text('This error is visible only in view mode') },
            React.createElement("span", null,
                React.createElement(ReadOnlyError, { className: styles.errorIcon })))) : (React.createElement("div", { className: styles.discIcon }))),
        React.createElement("div", { className: styles.errorWrapper },
            displayedAttributeTypesPath && (React.createElement("span", { className: styles.attributeTypesPath }, displayedAttributeTypesPath)),
            React.createElement("span", { className: styles.errorTitle },
                displayedMessage,
                showLink && (React.createElement(SmallIconButtonWithTooltip, { icon: HyperlinkIcon, size: "XXS", onClick: function () { return highlightError(error); }, tooltipTitle: i18n.text('Go to error'), className: styles.goToIcon }))),
            displayedErrorPath && React.createElement("span", { className: styles.parents }, displayedErrorPath))));
});
AttributeErrorItem.displayName = 'AttributeErrorItem';
