import React, { useContext, useMemo } from 'react';
import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri, HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
import classnames from 'classnames';
import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
import { CommentsContainer } from '../CommentsContainer';
import { DataTypeValue } from '../DataTypeValue';
import { PivotingTooltip } from '../PivotingTooltip';
import { MaskingSwitcher } from '../MaskingSwitcher';
import styles from './SimpleAttribute.module.css';
export var SimpleAttribute = function (_a) {
    var _b, _c, _d, _e, _f;
    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
    var _h = useMaskedAttribute({
        attributeType: attributeType,
        attributeValue: rawAttributeValue
    }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
    var variableStyles = useCssVariableStyles({
        '--history-insert-color': historyPalettes[HistoryOperations.insertAttribute].color,
        '--history-update-backgroundColor': historyPalettes[HistoryOperations.updateAttribute].backgroundColor,
        '--history-update-color': historyPalettes[HistoryOperations.updateAttribute].color,
        '--history-delete-backgroundColor': historyPalettes[HistoryOperations.deleteAttribute].backgroundColor,
        '--history-delete-color': historyPalettes[HistoryOperations.deleteAttribute].color
    });
    var _j = useContext(HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
    var appearance = useContext(HistoryDiffContext).appearance;
    var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
    var historyClassName = getHistoryAttributeClassName(attributeAppearance);
    var dataTypeValue = useMemo(function () { return (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })); }, [attributeValue, attributeType]);
    var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
    var unmaskingControl = isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
    return inlined || historyClassName ? (React.createElement("div", { style: variableStyles, className: classnames(className, (_b = {},
            _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
            _b)) },
        React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
            React.createElement("span", { className: classnames(styles.attributeValue, styles[historyClassName], (_d = {},
                    _d[styles.ovFalse] = !isOv(attributeValue),
                    _d)), "data-reltio-id": "reltio-attribute-value" },
                dataTypeValue,
                unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
            _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
            _e)) },
        React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
                dataTypeValue,
                unmaskingControl,
                FallbackSlot && React.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
        React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                uri: attributeValue.uri
            }), objectType: objectType })));
};
