var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core';
import { FluentTextFieldAutoComplete } from '../../UI/inputs/textField/FluentTextFieldAutoComplete';
const useStyles = makeStyles(theme => ({
    root: { display: 'flex', alignItems: 'center' },
    field: {
        minWidth: 300,
        maxWidth: 400,
        width: '100%',
        alignSelf: 'left',
        color: '#fff',
        '& .MuiOutlinedInput-root': {
            color: '#fff',
            backgroundColor: 'transparent',
            '& fieldset': {
                borderColor: 'rgba(255,255,255,0.6)',
            },
            '&:hover fieldset': {
                borderColor: 'rgba(255,255,255,0.85)',
            },
            '&.Mui-focused fieldset': {
                borderColor: '#fff',
            },
            '& input': {
                paddingTop: 4,
                paddingBottom: 4,
                height: 20,
                boxSizing: 'border-box',
                color: '#fff',
            },
            '& .MuiAutocomplete-input': {
                color: '#fff',
            },
        },
        '& .MuiInputBase-root': {
            color: '#fff',
        },
        '& .MuiAutocomplete-popupIndicator, & .MuiAutocomplete-clearIndicator': {
            color: '#fff',
            opacity: 0.95,
        },
        '& input::placeholder': {
            color: 'rgba(255,255,255,0.7)',
        },
    },
}));
function getDisplayName(item) {
    var _a, _b, _c;
    if (!item && item !== 0)
        return '';
    if (typeof item === 'string' || typeof item === 'number')
        return String(item);
    if (typeof item === 'object') {
        const name = (_c = (_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.label) !== null && _b !== void 0 ? _b : item.title) !== null && _c !== void 0 ? _c : item.displayName;
        return name !== undefined && name !== null ? String(name) : '';
    }
    return String(item);
}
export const ShellDropdown = (props) => {
    const classes = useStyles();
    const { componentName = 'Item', data = [], value = null, onChange, optionLabelDisplayFunction = getDisplayName, groupBy, placeholder, className, classProps } = props, other = __rest(props, ["componentName", "data", "value", "onChange", "optionLabelDisplayFunction", "groupBy", "placeholder", "className", "classProps"]);
    const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : (!value ? `All ${componentName}s` : undefined);
    return (React.createElement("div", { className: `${classes.root} ${className || ''}` }, React.createElement(FluentTextFieldAutoComplete, Object.assign({ className: classes.field, classProps: Object.assign({ autocompleteRoot: classes.field }, classProps), options: data, optionLabelDisplayFunction: optionLabelDisplayFunction, groupBy: groupBy, onChange: onChange, value: value, placeholder: placeholderText }, other))));
};
ShellDropdown.propTypes = {
    componentName: PropTypes.string,
    data: PropTypes.array,
    value: PropTypes.any,
    onChange: PropTypes.func,
    optionLabelDisplayFunction: PropTypes.func,
    placeholder: PropTypes.string,
    className: PropTypes.string,
    classProps: PropTypes.object,
};
export default ShellDropdown;
//# sourceMappingURL=ShellDropdown.js.map