import React from 'react';
import i18n from 'ui-i18n';
import { pipe, pluck, sortBy } from 'ramda';
import classnames from 'classnames';
import Typography from '@mui/material/Typography';
import { MultiSelect } from '../../../../../MultiSelect';
import { ReactSelectDropdownIndicatorWithIconButton } from '../../../../../ReactSelectDropdownIndicatorWithIconButton';
import { ActivityTypes } from '../../../types';
import { getActivityLabel } from '../../../utils/activities';
import { customStyles, useStyles } from '../../styles';
export var ActivitySelector = function (_a) {
    var activityTypes = _a.activityTypes, selectedActivityTypes = _a.selectedActivityTypes, onChange = _a.onChange;
    var styles = useStyles();
    var valueToOption = function (value) { return ({ value: value, label: getActivityLabel(value) }); };
    var prepareValues = function (values) { return values.map(valueToOption); };
    var showHint = selectedActivityTypes.length > 1 && selectedActivityTypes.includes(ActivityTypes.ENTITY_CHANGED);
    var options = pipe(sortBy(function (option) { return getActivityLabel(option); }), prepareValues)(activityTypes);
    return (React.createElement("div", { className: styles.selectorWrapper, "data-reltio-id": "activity-selector" },
        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Activity')),
        React.createElement(MultiSelect, { value: prepareValues(selectedActivityTypes), onChange: pipe(pluck('value'), 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 }),
        showHint && (React.createElement("span", { className: styles.selectorHint }, i18n.text('One at a time! Select a single Activity and any of its filters -OR- multiple Activities with no filters.')))));
};
