import React, { useMemo } from 'react';
import { propEq } from 'ramda';
import classnames from 'classnames';
import { getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
import { MultiValueChip } from '../MultiValueChip';
import { useMdmEntity, useMdmMetadata } from '../contexts/MdmModuleContext';
import styles from './RolesInput.module.css';
var components = { MultiValue: MultiValueChip };
export var RolesInput = function (_a) {
    var value = _a.value, onChange = _a.onChange, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
    var metadata = useMdmMetadata();
    var entity = useMdmEntity();
    var options = useMemo(function () {
        return getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
            value: role.uri,
            label: role.label
        }); });
    }, [metadata, entity.type]);
    var formattedValues = useMemo(function () {
        return (value || []).map(function (value) {
            var _a;
            var label = (_a = options.find(propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
            return {
                value: value,
                label: label || getLastUriPart(value)
            };
        });
    }, [value, options]);
    return (React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: onChange, components: components, classes: styles, className: classnames(styles.roleContainer, className), disabled: disabled }));
};
