import { FluentTextFieldAutoComplete } from "../../UI/inputs/textField/FluentTextFieldAutoComplete.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { makeStyles } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/shell/ui/ShellDropdown.jsx
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: .95
		},
		"& input::placeholder": { color: "rgba(255,255,255,0.7)" }
	}
}));
function getDisplayName(item) {
	if (!item && item !== 0) return "";
	if (typeof item === "string" || typeof item === "number") return String(item);
	if (typeof item === "object") {
		const name = item.name ?? item.label ?? item.title ?? item.displayName;
		return name !== void 0 && name !== null ? String(name) : "";
	}
	return String(item);
}
const ShellDropdown = (props) => {
	const $ = c(29);
	const classes = useStyles();
	let className;
	let classProps;
	let groupBy;
	let onChange;
	let other;
	let placeholder;
	let t0;
	let t1;
	let t2;
	let t3;
	if ($[0] !== props) {
		({componentName: t0, data: t1, value: t2, onChange, optionLabelDisplayFunction: t3, groupBy, placeholder, className, classProps, ...other} = props);
		$[0] = props;
		$[1] = className;
		$[2] = classProps;
		$[3] = groupBy;
		$[4] = onChange;
		$[5] = other;
		$[6] = placeholder;
		$[7] = t0;
		$[8] = t1;
		$[9] = t2;
		$[10] = t3;
	} else {
		className = $[1];
		classProps = $[2];
		groupBy = $[3];
		onChange = $[4];
		other = $[5];
		placeholder = $[6];
		t0 = $[7];
		t1 = $[8];
		t2 = $[9];
		t3 = $[10];
	}
	const componentName = t0 === void 0 ? "Item" : t0;
	let t4;
	if ($[11] !== t1) {
		t4 = t1 === void 0 ? [] : t1;
		$[11] = t1;
		$[12] = t4;
	} else t4 = $[12];
	const data = t4;
	const value = t2 === void 0 ? null : t2;
	const optionLabelDisplayFunction = t3 === void 0 ? getDisplayName : t3;
	const placeholderText = placeholder ?? (!value ? `All ${componentName}s` : void 0);
	const t5 = `${classes.root} ${className || ""}`;
	let t6;
	if ($[13] !== classProps || $[14] !== classes.field) {
		t6 = {
			autocompleteRoot: classes.field,
			...classProps
		};
		$[13] = classProps;
		$[14] = classes.field;
		$[15] = t6;
	} else t6 = $[15];
	let t7;
	if ($[16] !== classes.field || $[17] !== data || $[18] !== groupBy || $[19] !== onChange || $[20] !== optionLabelDisplayFunction || $[21] !== other || $[22] !== placeholderText || $[23] !== t6 || $[24] !== value) {
		t7 = /* @__PURE__ */ React.createElement(FluentTextFieldAutoComplete, {
			className: classes.field,
			classProps: t6,
			options: data,
			optionLabelDisplayFunction,
			groupBy,
			onChange,
			value,
			placeholder: placeholderText,
			...other
		});
		$[16] = classes.field;
		$[17] = data;
		$[18] = groupBy;
		$[19] = onChange;
		$[20] = optionLabelDisplayFunction;
		$[21] = other;
		$[22] = placeholderText;
		$[23] = t6;
		$[24] = value;
		$[25] = t7;
	} else t7 = $[25];
	let t8;
	if ($[26] !== t5 || $[27] !== t7) {
		t8 = /* @__PURE__ */ React.createElement("div", { className: t5 }, t7);
		$[26] = t5;
		$[27] = t7;
		$[28] = t8;
	} else t8 = $[28];
	return t8;
};
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
};
//#endregion
export { ShellDropdown as default };

//# sourceMappingURL=ShellDropdown.mjs.map