import React, { useMemo } from 'react';
import { createRelatedObjectUris, getObjectTypeByAttributeUri } from '@reltio/mdm-sdk';
import classnames from 'classnames';
import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../constants';
import { CommentsContainer } from '../../../CommentsContainer';
import { AttributeTitle } from '../../../AttributeTitle';
import { OvIcon } from '../../../OvIcon';
import { DescriptionIcon } from '../../../DescriptionIcon';
import { ReadOnlyAttribute } from '../../../ReadOnlyAttributesFactory';
import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
import { useMdmControlAttributes } from '../../../contexts/MdmModuleContext';
import { ValueHeightReporter } from '../../../SyncedValueHeight';
import { useOneLineStyles } from '../../styles';
export var OneLineRenderer = function (_a) {
    var value = _a.value, nonVisibleValues = _a.nonVisibleValues, attributeType = _a.attributeType, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
    var styles = useOneLineStyles();
    var label = attributeType.label, description = attributeType.description;
    var controlAttributes = useMdmControlAttributes();
    var isControlAttribute = useMemo(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
    var objectType = getObjectTypeByAttributeUri(value.uri);
    return (React.createElement(ValueHeightReporter, { uri: value.uri },
        React.createElement("div", { "data-reltio-id": "one-line-renderer", className: classnames(styles.collaborationWrapper, COMMENTS_CONTAINER_VISIBILITY_AREA) },
            React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
                React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
                React.createElement(DescriptionIcon, { description: description, className: styles.descriptionIcon }),
                isControlAttribute && React.createElement(ControlAttributeIcon, null),
                React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
                React.createElement(ReadOnlyAttribute, { className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true, classes: classes, FallbackSlot: FallbackSlot })),
            React.createElement(CommentsContainer, { uri: value.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                    uri: value.uri
                }), objectType: objectType }))));
};
