import React, { useCallback } from 'react';
import { prop } from 'ramda';
import Typography from '@mui/material/Typography';
import i18n from 'ui-i18n';
import { EntityAttrTypes } from '@reltio/mdm-sdk';
import { SmallIconButton } from '../SmallIconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import { useMdmEntity } from '../contexts/MdmModuleContext';
import { RolesInput } from '../RolesInput/RolesInput';
import styles from './RolesEditor.module.css';
export var RolesEditor = function (_a) {
    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
    var entity = useMdmEntity();
    var entityUri = entity.uri;
    var edited = state === 'edited';
    var handleChange = useCallback(function (values) {
        var roles = (values === null || values === void 0 ? void 0 : values.map(prop('value'))) || [];
        onChange({
            value: roles,
            attributeType: EntityAttrTypes.roles,
            uri: entityUri
        });
    }, [entityUri, onChange]);
    var handleDelete = useCallback(function () {
        onDelete({ uri: entityUri, attributeType: EntityAttrTypes.roles });
    }, [entityUri, onDelete]);
    return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
        React.createElement(RolesInput, { value: values, onChange: handleChange }),
        edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
            "(",
            i18n.text('edited'),
            ")")),
        !!onDelete && (React.createElement(SmallIconButton, { "data-reltio-id": "reltio-roles-delete-button", className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
};
