import { FluentButton } from "../../UI/inputs/buttons/FluentButton.mjs";
import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { RequiredFieldsMappingField } from "./RequiredFieldsMappingField.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { ChromeBackMirroredIcon } from "@fluentui/react-icons";
import { v4 } from "uuid";
//#region src/dataBrowser/forms/RequiredFieldsMappingForm.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	row: {
		display: "flex",
		alignItems: "center"
	},
	variableContainer: {
		width: "100%",
		display: "flex",
		alignItems: "flex-start"
	},
	icon: { marginTop: theme.spacing(5) },
	iconButton: { marginTop: theme.spacing(3.5) },
	iconContainer: { marginRight: theme.spacing(1) }
}));
const RequiredFieldsMappingForm = (props) => {
	const $ = c(32);
	const { requiredFields: t0, fieldMappings, properties, onSubmit: t1, optionLabelDisplayFunction, groupBy, propertyType: t2 } = props;
	const requiredFields = t0 === void 0 ? "" : t0;
	const onSubmit = t1 === void 0 ? _temp : t1;
	const propertyType = t2 === void 0 ? "entity" : t2;
	let t3;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = [];
		$[0] = t3;
	} else t3 = $[0];
	const [fields, setFields] = useState(t3);
	const classes = useStyles(props);
	let t4;
	bb0: {
		const fieldsStr = requiredFields || "";
		if (!fieldsStr.trim()) {
			let t5;
			if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
				t5 = [];
				$[1] = t5;
			} else t5 = $[1];
			t4 = t5;
			break bb0;
		}
		let options;
		if ($[2] !== fieldsStr) {
			options = [];
			fieldsStr.split(",").forEach((field) => {
				options.push({
					label: field.trim(),
					value: field.trim()
				});
			});
			$[2] = fieldsStr;
			$[3] = options;
		} else options = $[3];
		t4 = options;
	}
	const fieldOptions = t4;
	let t5;
	if ($[4] !== fields) {
		t5 = (fieldId, value, key, t6) => {
			const merge = t6 === void 0 ? false : t6;
			const updatedFields = [...fields];
			const matchingField = updatedFields.find((f) => f.id === fieldId);
			if (matchingField) if (merge) Object.keys(value).forEach((key_0) => {
				matchingField[key_0] = value[key_0];
			});
			else matchingField[key] = value;
			setFields(updatedFields);
		};
		$[4] = fields;
		$[5] = t5;
	} else t5 = $[5];
	const handleRequiredFieldChange = t5;
	let t6;
	bb1: {
		if (!properties) {
			let t7;
			if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
				t7 = [];
				$[6] = t7;
			} else t7 = $[6];
			t6 = t7;
			break bb1;
		}
		t6 = properties;
	}
	const propertyOptions = t6;
	let t7;
	if ($[7] !== fields || $[8] !== onSubmit || $[9] !== propertyType) {
		t7 = () => {
			const fieldMappings_0 = {};
			fields.forEach((field_0) => {
				fieldMappings_0[field_0.name] = {
					value: field_0.propertyValue ? field_0.propertyValue?.name : field_0.strValue.trim(),
					type: field_0.propertyValue ? propertyType : "custom"
				};
			});
			onSubmit(fieldMappings_0);
		};
		$[7] = fields;
		$[8] = onSubmit;
		$[9] = propertyType;
		$[10] = t7;
	} else t7 = $[10];
	const handleOnSubmit = t7;
	let t8;
	let t9;
	if ($[11] !== fieldMappings || $[12] !== fieldOptions || $[13] !== propertyOptions || $[14] !== propertyType) {
		t8 = () => {
			if (!fieldOptions || !fieldMappings || !propertyOptions) return;
			const currentFields = [];
			fieldOptions.forEach((fo) => {
				const mappingValue = fieldMappings[fo.value];
				const currentField = {
					id: v4(),
					strValue: mappingValue?.type === "custom" ? mappingValue?.value : "",
					propertyValue: mappingValue?.type === propertyType ? propertyOptions.find((po) => po.name === mappingValue?.value) : "",
					name: fo.value
				};
				currentFields.push(currentField);
			});
			setFields(currentFields);
		};
		t9 = [
			fieldMappings,
			fieldOptions,
			propertyOptions,
			propertyType
		];
		$[11] = fieldMappings;
		$[12] = fieldOptions;
		$[13] = propertyOptions;
		$[14] = propertyType;
		$[15] = t8;
		$[16] = t9;
	} else {
		t8 = $[15];
		t9 = $[16];
	}
	useEffect(t8, t9);
	let t10;
	if ($[17] !== classes.iconContainer || $[18] !== classes.row || $[19] !== fieldOptions || $[20] !== fields || $[21] !== groupBy || $[22] !== handleRequiredFieldChange || $[23] !== optionLabelDisplayFunction || $[24] !== propertyOptions) {
		t10 = fields.length > 0 && fieldOptions.map((item) => {
			const matchingField_0 = fields.find((field_1) => field_1.name === item.value);
			return /* @__PURE__ */ React.createElement("div", { className: classes.row }, /* @__PURE__ */ React.createElement(RequiredFieldsMappingField, {
				requiredField: matchingField_0,
				onRequiredFieldChange: handleRequiredFieldChange,
				options: propertyOptions || [],
				optionLabelDisplayFunction,
				groupBy
			}), /* @__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));
		});
		$[17] = classes.iconContainer;
		$[18] = classes.row;
		$[19] = fieldOptions;
		$[20] = fields;
		$[21] = groupBy;
		$[22] = handleRequiredFieldChange;
		$[23] = optionLabelDisplayFunction;
		$[24] = propertyOptions;
		$[25] = t10;
	} else t10 = $[25];
	let t11;
	if ($[26] !== handleOnSubmit) {
		t11 = /* @__PURE__ */ React.createElement(FluentButton, {
			variant: "contained",
			color: "primary",
			fullWidth: true,
			onClick: handleOnSubmit
		}, " ", "Save Mapping");
		$[26] = handleOnSubmit;
		$[27] = t11;
	} else t11 = $[27];
	let t12;
	if ($[28] !== classes.root || $[29] !== t10 || $[30] !== t11) {
		t12 = /* @__PURE__ */ React.createElement("div", { className: classes.root }, t10, t11);
		$[28] = classes.root;
		$[29] = t10;
		$[30] = t11;
		$[31] = t12;
	} else t12 = $[31];
	return t12;
};
function _temp() {}
//#endregion
export { RequiredFieldsMappingForm };

//# sourceMappingURL=RequiredFieldsMappingForm.mjs.map