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, { useCallback, forwardRef } from 'react';
import { makeStyles, Checkbox } from '@material-ui/core';
import { FluentTextField } from './FluentTextField';
import { Autocomplete } from '@material-ui/lab';
const useStyles = makeStyles((theme) => ({
    root: {
        '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
            padding: '4px 8px',
            height: 'auto'
        }
    }
}));
export const FluentTagFieldComponent = (props, ref) => {
    const classes = useStyles(props);
    const { id, data, startAdornment, endAdornment, onChange: onChangeProp, autoCompleteProps, displayProperty, width = 300, height = 'auto' } = props, otherProps = __rest(props, ["id", "data", "startAdornment", "endAdornment", "onChange", "autoCompleteProps", "displayProperty", "width", "height"]);
    const onChange = useCallback((e, value) => onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value), [onChangeProp]);
    const getOptionLabel = (option) => {
        if (displayProperty) {
            return option[displayProperty] || '';
        }
        return option;
    };
    return (React.createElement(Autocomplete, Object.assign({ classes: {
            inputRoot: classes.root
        }, multiple: true, id: id, onChange: onChange, options: data, getOptionLabel: getOptionLabel, style: { width, height } }, autoCompleteProps, { renderInput: (params) => {
            return React.createElement(FluentTextField, Object.assign({}, otherProps, params));
        }, renderOption: (option, { selected }) => {
            var _a;
            const isSelectedValue = displayProperty &&
                ((_a = autoCompleteProps === null || autoCompleteProps === void 0 ? void 0 : autoCompleteProps.value) === null || _a === void 0 ? void 0 : _a.some((item) => item[displayProperty] === option[displayProperty]));
            return (React.createElement("li", null, React.createElement(Checkbox, Object.assign({}, otherProps, { style: { marginRight: 8 }, checked: selected || isSelectedValue })), getOptionLabel(option)));
        } })));
};
export const FluentTagField = forwardRef(FluentTagFieldComponent);
//# sourceMappingURL=FluentTagField.js.map