/* eslint-disable no-use-before-define */
import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles, TextField } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1)
    },
    dense: {
        marginTop: theme.spacing(1)
    },
    input: {
        borderRadius: 2,
        height: 32,
        padding: 0,
        marginTop: 3
    },
    formTextInput: {
        fontSize: 14
    },
    labelRoot: {
        fontSize: 14
    }
}));
export const SelectGroupMenu = ({ data, placeholder, id, handleChange, className }) => {
    const classes = useStyles();
    const options = data &&
        data.map((option) => {
            const grouping = option.category;
            return Object.assign({ grouping }, option);
        });
    return (React.createElement(Autocomplete, { className: className, id: id, onChange: (event, value) => handleChange(value), options: options.sort((a, b) => -b.grouping.localeCompare(a.grouping)), groupBy: (option) => option.grouping, getOptionLabel: (option) => option.label, style: { width: 300 }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { label: !params.inputProps.value && placeholder, variant: "outlined", size: "small", InputLabelProps: {
                shrink: false,
                classes: {
                    root: classes.labelRoot,
                    focused: classes.labelFocused
                }
            }, SelectProps: {
                MenuProps: {
                    className: classes.menu
                }
            } }))) }));
};
//# sourceMappingURL=FluentSelectGroupMenu.js.map