import { FluentButton } from "../buttons/FluentButton.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { InputAdornment, TextField, makeStyles } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { SearchIcon } from "@fluentui/react-icons";
//#region src/UI/inputs/textField/FluentSearchField.jsx
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)"
	},
	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)"
	},
	MuiAutocomplete: { inputRoot: { "&&[class*=\"MuiOutlinedInput-root\"] $input": { padding: 1 } } }
}));
const FluentSearchField = (props) => {
	const $ = c(29);
	const classes = useStyles(props);
	let advancedSearch;
	let autoComplete;
	let autoId;
	let handleKeyDown;
	let id;
	let otherProps;
	let searchData;
	let toggleOptions;
	let udprecordid;
	if ($[0] !== props) {
		({autoComplete, searchData, autoId, toggleOptions, handleKeyDown, advancedSearch, udprecordid, id, ...otherProps} = props);
		$[0] = props;
		$[1] = advancedSearch;
		$[2] = autoComplete;
		$[3] = autoId;
		$[4] = handleKeyDown;
		$[5] = id;
		$[6] = otherProps;
		$[7] = searchData;
		$[8] = toggleOptions;
		$[9] = udprecordid;
	} else {
		advancedSearch = $[1];
		autoComplete = $[2];
		autoId = $[3];
		handleKeyDown = $[4];
		id = $[5];
		otherProps = $[6];
		searchData = $[7];
		toggleOptions = $[8];
		udprecordid = $[9];
	}
	let t0;
	if ($[10] !== autoComplete || $[11] !== autoId || $[12] !== classes || $[13] !== otherProps || $[14] !== props.InputProps?.classes || $[15] !== searchData) {
		t0 = autoComplete && /* @__PURE__ */ React.createElement(Autocomplete, {
			freeSolo: true,
			id: autoId,
			disableClearable: true,
			options: searchData && searchData.map(_temp),
			classes: {
				root: classes.formControl,
				input: classes.MuiAutocomplete
			},
			renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
				...params,
				...otherProps,
				label: "Search input",
				margin: "normal",
				variant: "outlined",
				InputProps: {
					...params.InputProps,
					type: "search",
					classes: {
						root: classes.input,
						input: classes.formTextInput,
						...props.InputProps?.classes
					}
				},
				InputLabelProps: {
					shrink: false,
					classes: {
						root: classes.labelRoot,
						focused: classes.labelFocused
					}
				}
			}),
			renderOption: _temp2
		});
		$[10] = autoComplete;
		$[11] = autoId;
		$[12] = classes;
		$[13] = otherProps;
		$[14] = props.InputProps?.classes;
		$[15] = searchData;
		$[16] = t0;
	} else t0 = $[16];
	let t1;
	if ($[17] !== advancedSearch || $[18] !== autoComplete || $[19] !== classes || $[20] !== handleKeyDown || $[21] !== id || $[22] !== otherProps || $[23] !== toggleOptions || $[24] !== udprecordid) {
		t1 = !autoComplete && /* @__PURE__ */ React.createElement(TextField, {
			label: "Search input",
			margin: "normal",
			variant: "outlined",
			onKeyDown: handleKeyDown,
			fullWidth: true,
			...otherProps,
			classes: { root: classes.formControl },
			InputProps: {
				type: "search",
				startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null)),
				endAdornment: advancedSearch && /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(FluentButton, {
					variant: "contained",
					color: "primary",
					onMouseEnter: () => toggleOptions(true)
				}, "Advanced Search")),
				classes: {
					root: classes.input,
					input: classes.formTextInput
				}
			},
			InputLabelProps: {
				shrink: false,
				classes: {
					root: classes.labelRoot,
					focused: classes.labelFocused
				}
			},
			inputProps: {
				id,
				udprecordid
			}
		});
		$[17] = advancedSearch;
		$[18] = autoComplete;
		$[19] = classes;
		$[20] = handleKeyDown;
		$[21] = id;
		$[22] = otherProps;
		$[23] = toggleOptions;
		$[24] = udprecordid;
		$[25] = t1;
	} else t1 = $[25];
	let t2;
	if ($[26] !== t0 || $[27] !== t1) {
		t2 = /* @__PURE__ */ React.createElement("div", null, t0, t1);
		$[26] = t0;
		$[27] = t1;
		$[28] = t2;
	} else t2 = $[28];
	return t2;
};
function _temp(option) {
	return option.title;
}
function _temp2(props_0, option_0) {
	return /* @__PURE__ */ React.createElement("li", {
		udprecordid: `'udpRecord-FluentSearchField'+${option_0.title}`,
		...props_0
	}, option_0.title);
}
//#endregion
export { FluentSearchField };

//# sourceMappingURL=FluentSearchField.mjs.map