import { Field } from "../../utilities/form/Field.mjs";
import { FluentTextFieldAutoComplete } from "../../UI/inputs/textField/FluentTextFieldAutoComplete.mjs";
import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { ChromeBackMirroredIcon } from "@fluentui/react-icons";
import { useTranslation } from "react-i18next";
//#region src/dataBrowser/forms/ParamsMappingFields.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	row: {
		display: "flex",
		alignItems: "center"
	},
	iconContainer: {
		marginLeft: theme.spacing(1),
		marginRight: theme.spacing(1)
	}
}));
const ParamsMappingFields = (props) => {
	const $ = c(15);
	const { paramMappings, paramOptions, propertyOptions, fieldWidth, propertyLabel } = props;
	const classes = useStyles();
	const { t } = useTranslation();
	let t0;
	if ($[0] !== classes || $[1] !== fieldWidth || $[2] !== paramMappings || $[3] !== paramOptions || $[4] !== propertyLabel || $[5] !== propertyOptions || $[6] !== t) {
		let t1;
		if ($[8] !== classes || $[9] !== fieldWidth || $[10] !== paramMappings || $[11] !== propertyLabel || $[12] !== propertyOptions || $[13] !== t) {
			t1 = (item) => {
				let initialPropertyValue = "";
				const matchingMappingName = paramMappings?.[item.value];
				if (matchingMappingName) initialPropertyValue = propertyOptions.find((property) => property.name === matchingMappingName);
				return /* @__PURE__ */ React.createElement("div", { className: classes.row }, /* @__PURE__ */ React.createElement(Field, {
					component: FluentTextFieldAutoComplete,
					label: t(propertyLabel),
					name: `property-${item.label}`,
					id: `property-${item.label}`,
					fullWidth: true,
					variant: "outlined",
					margin: "dense",
					size: "small",
					options: propertyOptions || [],
					optionKey: "name",
					style: { width: fieldWidth },
					initialValue: initialPropertyValue
				}), /* @__PURE__ */ React.createElement("div", { className: classes.iconContainer }, /* @__PURE__ */ React.createElement(FluentIcon, {
					component: ChromeBackMirroredIcon,
					size: 20,
					customSize: true
				})), /* @__PURE__ */ React.createElement(Typography, {
					variant: "subtitle1",
					style: {
						textOverflow: "ellipsis",
						overflow: "hidden"
					}
				}, item.label));
			};
			$[8] = classes;
			$[9] = fieldWidth;
			$[10] = paramMappings;
			$[11] = propertyLabel;
			$[12] = propertyOptions;
			$[13] = t;
			$[14] = t1;
		} else t1 = $[14];
		t0 = paramOptions.map(t1);
		$[0] = classes;
		$[1] = fieldWidth;
		$[2] = paramMappings;
		$[3] = paramOptions;
		$[4] = propertyLabel;
		$[5] = propertyOptions;
		$[6] = t;
		$[7] = t0;
	} else t0 = $[7];
	return t0;
};
//#endregion
export { ParamsMappingFields };

//# sourceMappingURL=ParamsMappingFields.mjs.map