import { Field } from "../Field.mjs";
import { Typography as Typography$1 } from "../../../UI/dataDisplay/typography/Typography.mjs";
import { FluentTextField } from "../../../UI/inputs/textField/FluentTextField.mjs";
import { FluentCheckbox } from "../../../UI/inputs/checkbox/FluentCheckbox.mjs";
import { FluentSelectMenu } from "../../../UI/inputs/menus/FluentSelectMenu.mjs";
import { PaymentCard } from "./PaymentCard.mjs";
import { formatBankAccountNumber, formatRoutingNumber } from "./CreditCardUtils.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { FormControl, FormControlLabel } from "@material-ui/core";
import { useTranslation } from "react-i18next";
//#region src/utilities/form/paymentForm/NewECheckForm.tsx
/**
* NewCardForm component renders a form for entering new credit card details.
*
* @param {Object} props - The properties object.
* @param {boolean} props.isFormDisabled - Flag to disable the form fields.
* @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
* @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
*
* @returns {JSX.Element} The rendered NewCardForm component.
*/
const NewECheckForm = (t0) => {
	const $ = c(66);
	const { isFormDisabled, classes, bankAccountTypes } = t0;
	const { t } = useTranslation();
	const t1 = classes.formControl;
	let t2;
	if ($[0] !== t) {
		t2 = t("Name on Bank Account");
		$[0] = t;
		$[1] = t2;
	} else t2 = $[1];
	let t3;
	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = { maxLength: 256 };
		$[2] = t3;
	} else t3 = $[2];
	let t4;
	if ($[3] !== isFormDisabled || $[4] !== t2) {
		t4 = {
			label: t2,
			variant: "outlined",
			size: "small",
			disabled: isFormDisabled,
			fullWidth: true,
			inputProps: t3
		};
		$[3] = isFormDisabled;
		$[4] = t2;
		$[5] = t4;
	} else t4 = $[5];
	const t5 = !isFormDisabled;
	let t6;
	if ($[6] !== t4 || $[7] !== t5) {
		t6 = /* @__PURE__ */ React.createElement(Field, {
			component: FluentTextField,
			ComponentProps: t4,
			name: "accountNickName",
			initialValue: "",
			required: t5
		});
		$[6] = t4;
		$[7] = t5;
		$[8] = t6;
	} else t6 = $[8];
	let t7;
	if ($[9] !== classes.formControl || $[10] !== t6) {
		t7 = /* @__PURE__ */ React.createElement(FormControl, { className: t1 }, t6);
		$[9] = classes.formControl;
		$[10] = t6;
		$[11] = t7;
	} else t7 = $[11];
	const t8 = classes.formControl;
	let t9;
	if ($[12] !== t) {
		t9 = t("Account Number");
		$[12] = t;
		$[13] = t9;
	} else t9 = $[13];
	let t10;
	if ($[14] !== isFormDisabled || $[15] !== t9) {
		t10 = {
			label: t9,
			variant: "outlined",
			size: "small",
			disabled: isFormDisabled,
			fullWidth: true
		};
		$[14] = isFormDisabled;
		$[15] = t9;
		$[16] = t10;
	} else t10 = $[16];
	const t11 = !isFormDisabled;
	let t12;
	if ($[17] !== t10 || $[18] !== t11) {
		t12 = /* @__PURE__ */ React.createElement(Field, {
			component: FluentTextField,
			ComponentProps: t10,
			name: "accountNumber",
			initialValue: "",
			required: t11,
			pattern: "\\d{16,22}",
			format: formatBankAccountNumber
		});
		$[17] = t10;
		$[18] = t11;
		$[19] = t12;
	} else t12 = $[19];
	let t13;
	if ($[20] !== classes.formControl || $[21] !== t12) {
		t13 = /* @__PURE__ */ React.createElement(FormControl, { className: t8 }, t12);
		$[20] = classes.formControl;
		$[21] = t12;
		$[22] = t13;
	} else t13 = $[22];
	const t14 = classes.formControl;
	let t15;
	if ($[23] !== t) {
		t15 = t("Account Type");
		$[23] = t;
		$[24] = t15;
	} else t15 = $[24];
	let t16;
	if ($[25] !== bankAccountTypes) {
		t16 = bankAccountTypes || [];
		$[25] = bankAccountTypes;
		$[26] = t16;
	} else t16 = $[26];
	let t17;
	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
		t17 = { disableClearable: true };
		$[27] = t17;
	} else t17 = $[27];
	let t18;
	if ($[28] !== t15 || $[29] !== t16) {
		t18 = {
			label: t15,
			id: "bankAccountType",
			variant: "outlined",
			margin: "normal",
			size: "small",
			width: "100%",
			fullWidth: true,
			disabled: false,
			data: t16,
			displayProperty: "name",
			autoCompleteProps: t17
		};
		$[28] = t15;
		$[29] = t16;
		$[30] = t18;
	} else t18 = $[30];
	const t19 = t18;
	const t20 = !isFormDisabled;
	let t21;
	if ($[31] !== t19 || $[32] !== t20) {
		t21 = /* @__PURE__ */ React.createElement(Field, {
			component: FluentSelectMenu,
			ComponentProps: t19,
			valueForChange: _temp,
			name: "bankAccountType",
			required: t20,
			onChange: _temp2
		});
		$[31] = t19;
		$[32] = t20;
		$[33] = t21;
	} else t21 = $[33];
	let t22;
	if ($[34] !== classes.formControl || $[35] !== t21) {
		t22 = /* @__PURE__ */ React.createElement(FormControl, { className: t14 }, t21);
		$[34] = classes.formControl;
		$[35] = t21;
		$[36] = t22;
	} else t22 = $[36];
	const t23 = classes.formControl;
	let t24;
	if ($[37] !== t) {
		t24 = t("Routing Number");
		$[37] = t;
		$[38] = t24;
	} else t24 = $[38];
	let t25;
	if ($[39] !== isFormDisabled || $[40] !== t24) {
		t25 = {
			label: t24,
			variant: "outlined",
			size: "small",
			disabled: isFormDisabled,
			fullWidth: true
		};
		$[39] = isFormDisabled;
		$[40] = t24;
		$[41] = t25;
	} else t25 = $[41];
	const t26 = !isFormDisabled;
	let t27;
	if ($[42] !== t25 || $[43] !== t26) {
		t27 = /* @__PURE__ */ React.createElement(Field, {
			component: FluentTextField,
			ComponentProps: t25,
			name: "routingNumber",
			initialValue: "",
			required: t26,
			pattern: "\\d{9}",
			format: formatRoutingNumber
		});
		$[42] = t25;
		$[43] = t26;
		$[44] = t27;
	} else t27 = $[44];
	let t28;
	if ($[45] !== classes.formControl || $[46] !== t27) {
		t28 = /* @__PURE__ */ React.createElement(FormControl, { className: t23 }, t27);
		$[45] = classes.formControl;
		$[46] = t27;
		$[47] = t28;
	} else t28 = $[47];
	const t29 = classes.formControlCheck;
	let t30;
	if ($[48] !== isFormDisabled) {
		t30 = /* @__PURE__ */ React.createElement(Field, {
			component: FluentCheckbox,
			name: "isSaveAsNewMethod",
			type: "checkbox",
			defaultValue: false,
			disabled: isFormDisabled
		});
		$[48] = isFormDisabled;
		$[49] = t30;
	} else t30 = $[49];
	let t31;
	if ($[50] !== t) {
		t31 = t("Save");
		$[50] = t;
		$[51] = t31;
	} else t31 = $[51];
	let t32;
	if ($[52] !== t31) {
		t32 = /* @__PURE__ */ React.createElement(Typography$1, null, t31);
		$[52] = t31;
		$[53] = t32;
	} else t32 = $[53];
	let t33;
	if ($[54] !== t30 || $[55] !== t32) {
		t33 = /* @__PURE__ */ React.createElement(FormControlLabel, {
			control: t30,
			label: t32
		});
		$[54] = t30;
		$[55] = t32;
		$[56] = t33;
	} else t33 = $[56];
	let t34;
	if ($[57] !== classes.formControlCheck || $[58] !== t33) {
		t34 = /* @__PURE__ */ React.createElement(FormControl, { className: t29 }, t33);
		$[57] = classes.formControlCheck;
		$[58] = t33;
		$[59] = t34;
	} else t34 = $[59];
	let t35;
	if ($[60] !== t13 || $[61] !== t22 || $[62] !== t28 || $[63] !== t34 || $[64] !== t7) {
		t35 = /* @__PURE__ */ React.createElement(PaymentCard, null, t7, t13, t22, t28, t34);
		$[60] = t13;
		$[61] = t22;
		$[62] = t28;
		$[63] = t34;
		$[64] = t7;
		$[65] = t35;
	} else t35 = $[65];
	return t35;
};
function _temp(e) {
	return e.value;
}
function _temp2() {}
//#endregion
export { NewECheckForm };

//# sourceMappingURL=NewECheckForm.mjs.map