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;
};
/* eslint-disable no-use-before-define */
import React from 'react';
import { makeStyles, TextField, InputAdornment } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { SearchIcon } from '@fluentui/react-icons';
import { FluentButton } from '../buttons/FluentButton';
const useStyles = makeStyles((theme) => ({
    input: {
        borderRadius: 2,
        height: (props) => !props.multiline && 32,
        padding: (props) => !props.multiline && 0,
        marginTop: 3,
        '& .MuiInputAdornment-positionStart': {
            marginLeft: theme.spacing(1)
        },
        '& .MuiInputAdornment-positionEnd': {
            marginRight: 0
        },
        '& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)': {
            marginTop: 2
        },
        '& .MuiFilledInput-input': {
            paddingTop: theme.spacing(2)
        }
    },
    formTextInput: {
        fontSize: 14
    },
    labelRoot: {
        fontSize: 14,
        marginTop: -8,
        position: 'absolute !important',
        height: 1,
        width: 1,
        overflow: 'hidden',
        clip: 'rect(1px 1px 1px 1px)' /* IE6, IE7 */
    },
    FormControl: {
        display: 'none',
        marginTop: 0,
        '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]': {
            padding: 0
        }
    },
    root: {
        marginTop: 5,
        '& .MuiFormLabel-root': {
            marginTop: -27,
            marginLeft: -15
        },
        '& .MuiInputAdornment-root': {
            paddingLeft: theme.spacing(1)
        }
    },
    formControl: {
        '& .MuiFormControl-marginNormal': {
            marginTop: 4,
            marginBottom: 4
        },
        marginTop: 4,
        marginBottom: 4
    },
    elementInvisible: {
        position: 'absolute !important',
        height: 1,
        width: 1,
        overflow: 'hidden',
        clip: 'rect(1px 1px 1px 1px)' /* IE6, IE7 */
    },
    MuiAutocomplete: {
        inputRoot: {
            '&&[class*="MuiOutlinedInput-root"] $input': {
                padding: 1
            }
        }
    }
}));
export const FluentSearchField = (props) => {
    const classes = useStyles(props);
    const { autoComplete, searchData, autoId, toggleOptions, handleKeyDown, advancedSearch, udprecordid, id } = props, otherProps = __rest(props, ["autoComplete", "searchData", "autoId", "toggleOptions", "handleKeyDown", "advancedSearch", "udprecordid", "id"]);
    return (React.createElement("div", null, autoComplete && (React.createElement(Autocomplete, { freeSolo: true, id: autoId, disableClearable: true, options: searchData && searchData.map((option) => option.title), classes: {
            root: classes.formControl,
            input: classes.MuiAutocomplete
        }, renderInput: (params) => {
            var _a;
            return (React.createElement(TextField, Object.assign({}, params, otherProps, { label: "Search input", margin: "normal", variant: "outlined", InputProps: Object.assign(Object.assign({}, params.InputProps), { type: 'search', classes: Object.assign({ root: classes.input, input: classes.formTextInput }, (_a = props.InputProps) === null || _a === void 0 ? void 0 : _a.classes) }), InputLabelProps: {
                    shrink: false,
                    classes: {
                        root: classes.labelRoot,
                        focused: classes.labelFocused
                    }
                } })));
        }, renderOption: (props, option) => (React.createElement("li", Object.assign({ udprecordid: `'udpRecord-FluentSearchField'+${option.title}` }, props), option.title)) })), !autoComplete && (React.createElement(TextField, Object.assign({ label: "Search input", margin: "normal", variant: "outlined", onKeyDown: handleKeyDown, fullWidth: true }, otherProps, { classes: {
            root: classes.formControl
        }, InputProps: {
            type: 'search',
            startAdornment: (React.createElement(InputAdornment, { position: "start" }, React.createElement(SearchIcon, null))),
            endAdornment: advancedSearch && (React.createElement(InputAdornment, { position: "end" }, React.createElement(FluentButton, { variant: "contained", color: "primary", onMouseEnter: () => toggleOptions(true) }, "Advanced Searc"))),
            classes: {
                root: classes.input,
                input: classes.formTextInput
            }
        }, InputLabelProps: {
            shrink: false,
            classes: {
                root: classes.labelRoot,
                focused: classes.labelFocused
            }
        }, inputProps: {
            id: id,
            udprecordid: udprecordid,
        } })))));
};
//# sourceMappingURL=FluentSearchField.js.map