import React from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { sortBy, prop } from 'ramda';
import Typography from '@mui/material/Typography';
import { MultiSelect } from '../../../../../MultiSelect';
import { ReactSelectDropdownIndicatorWithIconButton } from '../../../../../ReactSelectDropdownIndicatorWithIconButton';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { customStyles, useStyles } from '../../styles';
export var SourceSelector = function (_a) {
    var selectedSources = _a.selectedSources, onChange = _a.onChange;
    var styles = useStyles();
    var metadata = useMdmMetadata();
    var options = sortBy(function (option) { return option.label; })(metadata.sources);
    return (React.createElement("div", { className: styles.selectorWrapper, "data-reltio-id": "source-selector" },
        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Source')),
        React.createElement(MultiSelect, { value: selectedSources, onChange: onChange, options: options, TextFieldProps: {
                InputProps: { disableUnderline: true },
                classes: { root: styles.dropDownInput }
            }, components: {
                DropdownIndicator: ReactSelectDropdownIndicatorWithIconButton
            }, styles: customStyles, classes: styles, getOptionValue: prop('abbreviation'), menuPlacement: "bottom", menuPortalTarget: document.body, menuShouldBlockScroll: true, captureMenuScroll: false })));
};
