import React from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { pipe, pluck, sortBy } from 'ramda';
import Typography from '@mui/material/Typography';
import { MultiSelect } from '../../../../../MultiSelect';
import { ReactSelectDropdownIndicatorWithIconButton } from '../../../../../ReactSelectDropdownIndicatorWithIconButton';
import { customStyles, useStyles } from '../../styles';
export var EntityTypesSelector = function (_a) {
    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, onChange = _a.onChange;
    var styles = useStyles();
    var valueToOption = function (entityType) { return ({ value: entityType.uri, label: entityType.label, entityType: entityType }); };
    var prepareValues = function (values) { return values.map(valueToOption); };
    var options = pipe(sortBy(function (option) { return option.label; }), prepareValues)(entityTypes);
    return (React.createElement("div", { className: styles.selectorWrapper, "data-reltio-id": "entity-types-selector" },
        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Type')),
        React.createElement(MultiSelect, { value: prepareValues(selectedEntityTypes), onChange: pipe(pluck('entityType'), onChange), options: options, TextFieldProps: {
                InputProps: { disableUnderline: true },
                classes: { root: styles.dropDownInput }
            }, components: {
                DropdownIndicator: ReactSelectDropdownIndicatorWithIconButton
            }, styles: customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body, menuShouldBlockScroll: true, captureMenuScroll: false })));
};
