import { FluentButton } from "../../../UI/inputs/buttons/FluentButton.mjs";
import { ConfigService } from "../../../configService/index.mjs";
import { useUser } from "../../auth/useUser.mjs";
import { UnityFluentIcon } from "../../iconLibrary/UnityFluentIcon.mjs";
import { getIconFromName } from "../../tree/TreeUtilities.mjs";
import { useAxiosGet } from "../../useAxiosGet.mjs";
import { PaymentTenderTypeEnum } from "../../../enums/paymentTenderTypeEnum.mjs";
import { LinearProgress as LinearProgress$1 } from "../../../UI/loading/LinearProgress.mjs";
import { Box as Box$1 } from "../../../UI/Box.mjs";
import { usePaymentProviderForm } from "./usePaymentProviderForm.mjs";
import PaymentDropdown from "./PaymentDropdown.mjs";
import { HostedPaymentError } from "./HostedPaymentError.mjs";
import { NewECheckForm } from "./NewECheckForm.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useState } from "react";
import { makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
//#region src/utilities/form/paymentForm/BankAccountForm.tsx
const useStyles = makeStyles((theme) => ({
	formControl: {
		width: "100%",
		marginTop: "5px"
	},
	formControlCheck: {
		width: "100%",
		marginTop: "5px",
		marginLeft: "3px"
	}
}));
/**
* `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
* It supports both hosted payment pages and direct input forms for bank account details.
*
* @param {Object} props - The properties passed to the component.
* @param {Array} props.bankAccountTypes - An array of available bank account types.
* @param {Object} props.data - Data related to the bank account form.
* @param {string} props.externalId - External identifier for the bank account.
* @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
* @param {string|null} [props.providerType=null] - Type of the payment provider.
* @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
* @param {Object} props.paymentDetails - Details of the payment.
* @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
* @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
* @param {string} props.readPropertiesMessageError - Error message for reading properties.
* @param {Function} props.onStatusChange - Callback function to handle status changes.
* @param {boolean} props.enabled - Flag to indicate if the form is enabled.
* @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
* @param {string} props.actionLabel - The label for the action button.
* @param {Object} restProps - Additional properties passed to the component.
*
* @returns {JSX.Element} The rendered component.
*/
const BankAccountForm = (t0) => {
	const $ = c(39);
	const { bankAccountTypes: t1, data, externalId, isFormDisabled: t2, providerType: t3, providerProps: t4, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, actionLabel, setSelectedPaymentAccount } = t0;
	let t5;
	if ($[0] !== t1) {
		t5 = t1 === void 0 ? [] : t1;
		$[0] = t1;
		$[1] = t5;
	} else t5 = $[1];
	const bankAccountTypes = t5;
	const isFormDisabled = t2 === void 0 ? false : t2;
	const providerType = t3 === void 0 ? null : t3;
	const providerProps = t4 === void 0 ? null : t4;
	const classes = useStyles();
	const { t } = useTranslation();
	useUser();
	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
	let t6;
	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
		t6 = {};
		$[2] = t6;
	} else t6 = $[2];
	const [t7] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, t6, false);
	const { data: paymentAccounts, loading: loadingPaymentAccounts } = t7;
	let t8;
	if ($[3] !== onStatusChange) {
		t8 = () => {
			setShowHostedPaymentPage(true);
			onStatusChange && onStatusChange({ isValid: false });
		};
		$[3] = onStatusChange;
		$[4] = t8;
	} else t8 = $[4];
	const handleShowHostedPaymentPage = t8;
	let t9;
	if ($[5] !== isHostedPaymentPage || $[6] !== onStatusChange || $[7] !== paymentAccounts?.length) {
		t9 = () => {
			const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
			const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
			setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
			onStatusChange && onStatusChange({ isValid: enableSubmitForm });
		};
		$[5] = isHostedPaymentPage;
		$[6] = onStatusChange;
		$[7] = paymentAccounts?.length;
		$[8] = t9;
	} else t9 = $[8];
	let t10;
	if ($[9] !== isHostedPaymentPage || $[10] !== paymentAccounts) {
		t10 = [isHostedPaymentPage, paymentAccounts];
		$[9] = isHostedPaymentPage;
		$[10] = paymentAccounts;
		$[11] = t10;
	} else t10 = $[11];
	useEffect(t9, t10);
	if (loadingPaymentAccounts) {
		let t11;
		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
			t11 = /* @__PURE__ */ React.createElement(Box$1, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
			$[12] = t11;
		} else t11 = $[12];
		return t11;
	}
	if (!showHostedPaymentPage && paymentAccounts?.length > 0) {
		let t11;
		if ($[13] !== paymentAccounts || $[14] !== setSelectedPaymentAccount) {
			t11 = /* @__PURE__ */ React.createElement(PaymentDropdown, {
				paymentAccounts,
				setSelectedPaymentAccount,
				paymentType: PaymentTenderTypeEnum.ECheck
			});
			$[13] = paymentAccounts;
			$[14] = setSelectedPaymentAccount;
			$[15] = t11;
		} else t11 = $[15];
		let t12;
		let t13;
		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
			t12 = /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("BankIcon") });
			t13 = { padding: "18px 20px" };
			$[16] = t12;
			$[17] = t13;
		} else {
			t12 = $[16];
			t13 = $[17];
		}
		let t14;
		if ($[18] !== actionLabel || $[19] !== t) {
			t14 = actionLabel || t("Enter Bank Account Details");
			$[18] = actionLabel;
			$[19] = t;
			$[20] = t14;
		} else t14 = $[20];
		let t15;
		if ($[21] !== handleShowHostedPaymentPage || $[22] !== t14) {
			t15 = /* @__PURE__ */ React.createElement(Box$1, {
				textAlign: "center",
				mt: 3
			}, /* @__PURE__ */ React.createElement(FluentButton, {
				variant: "outlined",
				color: "primary",
				onClick: handleShowHostedPaymentPage,
				size: "small",
				startIcon: t12,
				style: t13
			}, t14));
			$[21] = handleShowHostedPaymentPage;
			$[22] = t14;
			$[23] = t15;
		} else t15 = $[23];
		let t16;
		if ($[24] !== t11 || $[25] !== t15) {
			t16 = /* @__PURE__ */ React.createElement(React.Fragment, null, t11, t15);
			$[24] = t11;
			$[25] = t15;
			$[26] = t16;
		} else t16 = $[26];
		return t16;
	}
	if (hasReadPropertiesError) {
		let t11;
		if ($[27] !== readPropertiesMessageError || $[28] !== t) {
			t11 = readPropertiesMessageError || t("Unknown error");
			$[27] = readPropertiesMessageError;
			$[28] = t;
			$[29] = t11;
		} else t11 = $[29];
		let t12;
		if ($[30] !== t11) {
			t12 = /* @__PURE__ */ React.createElement(HostedPaymentError, {
				error: "Error",
				message: t11
			});
			$[30] = t11;
			$[31] = t12;
		} else t12 = $[31];
		return t12;
	}
	let t11;
	if ($[32] !== bankAccountTypes || $[33] !== classes || $[34] !== isFormDisabled || $[35] !== isHostedPaymentPage || $[36] !== paymentProviderForm || $[37] !== showHostedPaymentPage) {
		t11 = showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewECheckForm, {
			isFormDisabled,
			classes,
			bankAccountTypes
		});
		$[32] = bankAccountTypes;
		$[33] = classes;
		$[34] = isFormDisabled;
		$[35] = isHostedPaymentPage;
		$[36] = paymentProviderForm;
		$[37] = showHostedPaymentPage;
		$[38] = t11;
	} else t11 = $[38];
	return t11;
};
//#endregion
export { BankAccountForm };

//# sourceMappingURL=BankAccountForm.mjs.map