import React from 'react';
import i18n from 'ui-i18n';
import { pipe, pluck } from 'ramda';
import classnames from 'classnames';
import Typography from '@mui/material/Typography';
import { ReactSelectDropdownIndicatorWithIconButton } from '../../../ReactSelectDropdownIndicatorWithIconButton';
import { MultiSelect } from '../../../MultiSelect';
import { getHistoryActivityLabel, historyActivityOptions } from './helpers';
import { customStyles, useStyles } from './styles';
export var HistoryActivitySelector = function (_a) {
    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className, disableUnderline = _a.disableUnderline;
    var styles = useStyles();
    var valueToOption = function (value) { return ({ value: value, label: getHistoryActivityLabel(value) }); };
    var prepareValues = function (values) { return values.map(valueToOption); };
    var options = prepareValues(historyActivityOptions);
    return (React.createElement("div", { className: classnames(styles.root, className), "data-reltio-id": "history-activity-selector" },
        React.createElement(Typography, { className: styles.title, variant: 'subtitle1' }, i18n.text('Activity')),
        React.createElement(MultiSelect, { value: prepareValues(selectedHistoryActivityTypes), onChange: pipe(pluck('value'), onChange), options: options, TextFieldProps: {
                InputProps: { disableUnderline: disableUnderline },
                classes: { root: styles.dropDownInput }
            }, components: {
                DropdownIndicator: ReactSelectDropdownIndicatorWithIconButton
            }, styles: customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body, menuShouldBlockScroll: true, captureMenuScroll: false })));
};
