import React from 'react';
import classnames from 'classnames';
import { EntityAttrTypes } from '@reltio/mdm-sdk';
import TagIcon from '@mui/icons-material/LocalOffer';
import { AttributeTitle } from '../../../AttributeTitle';
import { ReadOnlyAttribute } from '../../../ReadOnlyAttributesFactory';
import { Roles } from '../../../Roles';
import { Tags } from '../../../Tags';
import { useOneLineStyles } from '../../styles';
export var SpecialRenderer = function (_a) {
    var values = _a.values, attributeType = _a.attributeType, classes = _a.classes;
    var styles = useOneLineStyles();
    var label = attributeType.label;
    var renderIcon = function (className) {
        return attributeType.uri === EntityAttrTypes.tags.uri ? React.createElement(TagIcon, { className: className }) : null;
    };
    var renderValue = function (className) {
        switch (attributeType.uri) {
            case EntityAttrTypes.tags.uri:
                return React.createElement(Tags, { className: className, values: values });
            case EntityAttrTypes.roles.uri: {
                return React.createElement(Roles, { className: className, values: values });
            }
            default: {
                //startDate, endDate, "crosswalk" fake nested subattibutes
                return (React.createElement(ReadOnlyAttribute, { className: className, attributeValue: { value: values[0], uri: '' }, attributeType: attributeType, inlined: true, classes: classes }));
            }
        }
    };
    return (React.createElement("div", { "data-reltio-id": "special-renderer", className: classnames(styles.titleRow, styles.wrapper) },
        renderIcon(styles.titleIcon),
        React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
        renderValue(classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content))));
};
