import { Field } from "../../../utilities/form/Field.mjs";
import { DateTimeField } from "../datetimes/DateTimeField.mjs";
import { FluentToggle } from "../toggle/FluentToggle.mjs";
import { Typography as Typography$1 } from "../../dataDisplay/typography/Typography.mjs";
import { LayoutUnit } from "../../../layout/LayoutUnit.mjs";
import { AmbientCard } from "../../surfaces/cards/AmbientCard/AmbientCard.mjs";
import { IconButtonWithTooltip } from "../buttons/IconButtonWithToolTip.mjs";
import { FluentTextField } from "../textField/FluentTextField.mjs";
import { FluentDatePicker } from "../pickers/FluentDatePicker.mjs";
import { FormControlLabel as FormControlLabel$1 } from "../../utilityDisplay/FormControlLabel.mjs";
import { Grid as Grid$1 } from "../../Grid.mjs";
import { FluentCheckbox } from "../checkbox/FluentCheckbox.mjs";
import { EmptyStateDisplay } from "../../dataDisplay/EmptyStateDisplay.mjs";
import { FluentTimePicker } from "../pickers/FluentTimePicker.mjs";
import { FieldType } from "./fieldArrayCardEnum.mjs";
import SearchSideSheet from "./SearchSideSheet.mjs";
import AutocompleteFinalField from "./AutocompleteFinalField.mjs";
import DateRangeField from "./DateRangeField.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import { AddIcon, DeleteIcon } from "@fluentui/react-icons";
import { useTranslation } from "react-i18next";
import { FieldArray } from "react-final-form-arrays";
//#region src/UI/inputs/fieldArrayCard/FieldArrayCard.jsx
const useStyles = makeStyles((theme) => ({
	toggleWrapper: {
		marginLeft: theme.spacing(-.1),
		gap: theme.spacing(1),
		marginTop: theme.spacing(.8)
	},
	checkboxField: { marginLeft: theme.spacing(-1.1) },
	sectionHeader: {
		display: "flex",
		justifyContent: "space-between",
		gap: theme.spacing(1),
		alignItems: "center",
		marginBottom: theme.spacing(1)
	},
	fieldsWrapper: {
		display: "flex",
		flexDirection: "column"
	},
	cardsWrapper: {
		display: "flex",
		flexDirection: "column",
		gap: theme.spacing(2)
	},
	cardHeader: {
		display: "flex",
		justifyContent: "space-between",
		gap: theme.spacing(1),
		alignItems: "center"
	}
}));
const FieldArrayCard = (props) => {
	const $ = c(38);
	const { title: t0, fieldArrayName, getRowTitle, fieldConfig, removeTopLayoutUnit: t1, defaultAddedItemValues, enableSearchSideSheet, searchSideSheetTitle, searchFieldId: t2, formFieldId: t3, formatAddedSearchItems, productApiBase, searchApi, searchGridColDefs, searchGridTitle, handleSearch, disableExcludeInSearch: t4, searchSideSheetWidth, searchSideSheetHeight } = props;
	const title = t0 === void 0 ? " " : t0;
	const removeTopLayoutUnit = t1 === void 0 ? false : t1;
	const searchFieldId = t2 === void 0 ? "id" : t2;
	const formFieldId = t3 === void 0 ? "id" : t3;
	const disableExcludeInSearch = t4 === void 0 ? false : t4;
	const classes = useStyles();
	const [openSideSheet, setOpenSideSheet] = useState(false);
	const { t } = useTranslation();
	let t5;
	if ($[0] !== classes.checkboxField || $[1] !== classes.toggleWrapper) {
		t5 = (finalFieldName, config, fieldObj) => {
			const { fieldName, fieldType, fieldLabel, componentProps } = config;
			let fieldComponent;
			bb22: switch (fieldType) {
				case FieldType.DropdownMenu:
					fieldComponent = /* @__PURE__ */ React.createElement(Field, {
						...componentProps,
						name: `${finalFieldName}.${fieldName}`,
						component: AutocompleteFinalField,
						label: fieldLabel
					});
					break bb22;
				case FieldType.Date:
					fieldComponent = /* @__PURE__ */ React.createElement(Field, {
						...componentProps,
						name: `${finalFieldName}.${fieldName}`,
						component: FluentDatePicker,
						label: fieldLabel,
						size: "small",
						allowNull: true
					});
					break bb22;
				case FieldType.DateRange:
					fieldComponent = /* @__PURE__ */ React.createElement(DateRangeField, {
						...componentProps,
						fieldName: finalFieldName,
						initialValues: fieldObj
					});
					break bb22;
				case FieldType.Time:
					fieldComponent = /* @__PURE__ */ React.createElement(Field, {
						...componentProps,
						name: `${finalFieldName}.${fieldName}`,
						component: FluentTimePicker,
						label: fieldLabel,
						size: "small"
					});
					break bb22;
				case FieldType.DateTime:
					fieldComponent = /* @__PURE__ */ React.createElement(Field, {
						...componentProps,
						name: `${finalFieldName}.${fieldName}`,
						component: DateTimeField,
						label: fieldLabel,
						size: "small",
						allowNull: true
					});
					break bb22;
				case FieldType.Toggle:
					fieldComponent = /* @__PURE__ */ React.createElement(FormControlLabel$1, {
						control: /* @__PURE__ */ React.createElement(Field, {
							defaultChecked: false,
							...componentProps,
							name: `${finalFieldName}.${fieldName}`,
							component: FluentToggle,
							type: "checkbox"
						}),
						label: fieldLabel,
						className: classes.toggleWrapper
					});
					break bb22;
				case FieldType.Checkbox:
					fieldComponent = /* @__PURE__ */ React.createElement(FormControlLabel$1, {
						control: /* @__PURE__ */ React.createElement(Field, {
							defaultChecked: false,
							...componentProps,
							name: `${finalFieldName}.${fieldName}`,
							component: FluentCheckbox,
							type: "checkbox"
						}),
						label: fieldLabel,
						className: classes.checkboxField
					});
					break bb22;
				default: fieldComponent = /* @__PURE__ */ React.createElement(Field, {
					...componentProps,
					name: `${finalFieldName}.${fieldName}`,
					component: FluentTextField,
					label: fieldLabel
				});
			}
			return fieldComponent;
		};
		$[0] = classes.checkboxField;
		$[1] = classes.toggleWrapper;
		$[2] = t5;
	} else t5 = $[2];
	const getField = t5;
	let t6;
	if ($[3] !== disableExcludeInSearch || $[4] !== formFieldId || $[5] !== formatAddedSearchItems) {
		t6 = (selectedRecords, fieldArray) => {
			const formattedRecords = formatAddedSearchItems ? formatAddedSearchItems(selectedRecords ?? []) : selectedRecords;
			if (formattedRecords?.length) {
				for (const record of formattedRecords) if (disableExcludeInSearch || !!!fieldArray?.value?.find((item) => item[formFieldId] === record[formFieldId])) fieldArray.push(record);
			}
			setOpenSideSheet(false);
		};
		$[3] = disableExcludeInSearch;
		$[4] = formFieldId;
		$[5] = formatAddedSearchItems;
		$[6] = t6;
	} else t6 = $[6];
	const handleCloseSideSheet = t6;
	let t7;
	if ($[7] !== defaultAddedItemValues || $[8] !== enableSearchSideSheet) {
		t7 = (fields) => {
			if (enableSearchSideSheet) setOpenSideSheet(true);
			else if (defaultAddedItemValues) fields.push(defaultAddedItemValues);
			else fields.push({});
		};
		$[7] = defaultAddedItemValues;
		$[8] = enableSearchSideSheet;
		$[9] = t7;
	} else t7 = $[9];
	const handleAddField = t7;
	let t8;
	if ($[10] !== classes.cardHeader || $[11] !== classes.cardsWrapper || $[12] !== classes.fieldsWrapper || $[13] !== classes.sectionHeader || $[14] !== disableExcludeInSearch || $[15] !== fieldConfig || $[16] !== formFieldId || $[17] !== getField || $[18] !== getRowTitle || $[19] !== handleAddField || $[20] !== handleCloseSideSheet || $[21] !== handleSearch || $[22] !== openSideSheet || $[23] !== productApiBase || $[24] !== removeTopLayoutUnit || $[25] !== searchApi || $[26] !== searchFieldId || $[27] !== searchGridColDefs || $[28] !== searchGridTitle || $[29] !== searchSideSheetHeight || $[30] !== searchSideSheetTitle || $[31] !== searchSideSheetWidth || $[32] !== t || $[33] !== title) {
		t8 = (t9) => {
			const { fields: fields_0 } = t9;
			return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.sectionHeader }, /* @__PURE__ */ React.createElement("div", null, title && /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, title)), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
				onClick: () => {
					handleAddField(fields_0);
				},
				icon: AddIcon,
				title: t("Add")
			})), /* @__PURE__ */ React.createElement("div", { className: classes.cardsWrapper }, fields_0?.value?.length > 0 ? fields_0.map((name, index) => {
				const rowTitle = getRowTitle && getRowTitle(fields_0?.value?.[index]);
				return /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement("div", { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, rowTitle), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
					onClick: () => fields_0.remove(index),
					icon: DeleteIcon,
					title: t("Delete")
				})), rowTitle && !removeTopLayoutUnit && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement("div", { className: classes.fieldsWrapper }, fieldConfig?.map((config_0) => {
					if (Array.isArray(config_0)) return /* @__PURE__ */ React.createElement(Grid$1, {
						container: true,
						spacing: 2
					}, config_0?.map((innerConfig) => /* @__PURE__ */ React.createElement(Grid$1, {
						item: true,
						xs: 12,
						sm: 12 / config_0?.length
					}, getField(name, innerConfig, fields_0?.value?.[index]))));
					else return getField(name, config_0, fields_0?.value?.[index]);
				})));
			}) : /* @__PURE__ */ React.createElement(AmbientCard, {
				fullWidth: true,
				cardHeight: "155px"
			}, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
				primaryText: t("No records to show"),
				secondaryText: t("Try adding one")
			}))), /* @__PURE__ */ React.createElement(SearchSideSheet, {
				open: openSideSheet,
				handleClose: (data) => {
					handleCloseSideSheet(data, fields_0);
				},
				exclude: disableExcludeInSearch ? [] : fields_0?.value,
				title: searchSideSheetTitle,
				productApiBase,
				searchApi,
				colDefs: searchGridColDefs,
				idField: searchFieldId,
				formIdField: formFieldId,
				gridTitle: searchGridTitle,
				handleSearch,
				width: searchSideSheetWidth,
				height: searchSideSheetHeight
			}));
		};
		$[10] = classes.cardHeader;
		$[11] = classes.cardsWrapper;
		$[12] = classes.fieldsWrapper;
		$[13] = classes.sectionHeader;
		$[14] = disableExcludeInSearch;
		$[15] = fieldConfig;
		$[16] = formFieldId;
		$[17] = getField;
		$[18] = getRowTitle;
		$[19] = handleAddField;
		$[20] = handleCloseSideSheet;
		$[21] = handleSearch;
		$[22] = openSideSheet;
		$[23] = productApiBase;
		$[24] = removeTopLayoutUnit;
		$[25] = searchApi;
		$[26] = searchFieldId;
		$[27] = searchGridColDefs;
		$[28] = searchGridTitle;
		$[29] = searchSideSheetHeight;
		$[30] = searchSideSheetTitle;
		$[31] = searchSideSheetWidth;
		$[32] = t;
		$[33] = title;
		$[34] = t8;
	} else t8 = $[34];
	let t9;
	if ($[35] !== fieldArrayName || $[36] !== t8) {
		t9 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FieldArray, { name: fieldArrayName }, t8));
		$[35] = fieldArrayName;
		$[36] = t8;
		$[37] = t9;
	} else t9 = $[37];
	return t9;
};
//#endregion
export { FieldArrayCard };

//# sourceMappingURL=FieldArrayCard.mjs.map