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 { usePaymentProviderForm } from "./usePaymentProviderForm.mjs";
import PaymentDropdown from "./PaymentDropdown.mjs";
import { HostedPaymentError } from "./HostedPaymentError.mjs";
import { NewCreditCardForm } from "./NewCreditCardForm.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useState } from "react";
import { Box, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
//#region src/utilities/form/paymentForm/CreditCardForm.tsx
const useStyles = makeStyles((theme) => ({
	cardNumber: {
		width: "100%",
		marginBottom: "10px"
	},
	formControl: {
		width: "100%",
		"&.cardNumber": { marginBottom: "10px" },
		"&.submitControl": { marginTop: "35px" }
	},
	formControlCheck: {
		width: "100%",
		marginTop: "5px",
		marginLeft: "3px"
	}
}));
/**
* CreditCardForm component handles the rendering of a credit card payment form.
* It supports both hosted payment pages and direct credit card input forms.
*
* @param {boolean} isFormDisabled - Flag to disable the form.
* @param {object} data - Data related to the payment form.
* @param {string} externalId - External identifier for the payment form.
* @param {object} paymentDetails - Details of the payment.
* @param {string|null} providerType - Type of the payment provider.
* @param {object|null} providerProps - Properties for the payment provider.
* @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
* @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.
* @param {string} readPropertiesMessageError - Error message for reading properties.
* @param {boolean} enabled - Flag to indicate if the form is enabled.
* @param {function} onStatusChange - Callback function to handle status changes.
* @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.
* @param {string} actionLabel - Label for the action button.
* @param {object} restProps - Additional properties.
*
* @returns {JSX.Element} The rendered CreditCardForm component.
*/
const CreditCardForm = (t0) => {
	const $ = c(38);
	const { isFormDisabled: t1, data, externalId, paymentDetails, providerType: t2, providerProps: t3, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, actionLabel, onStatusChange, setSelectedPaymentAccount } = t0;
	const isFormDisabled = t1 === void 0 ? false : t1;
	const providerType = t2 === void 0 ? null : t2;
	const providerProps = t3 === void 0 ? null : t3;
	const { t } = useTranslation();
	const classes = useStyles();
	useUser();
	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
	const [creditCardNumberInput, setCreditCardNumberInput] = useState("");
	let t4;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t4 = {};
		$[0] = t4;
	} else t4 = $[0];
	const [t5] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, t4, false);
	const { data: paymentAccounts, loading: loadingPaymentAccounts } = t5;
	let t6;
	if ($[1] !== onStatusChange) {
		t6 = () => {
			setShowHostedPaymentPage(true);
			onStatusChange && onStatusChange({ isValid: false });
		};
		$[1] = onStatusChange;
		$[2] = t6;
	} else t6 = $[2];
	const handleShowHostedPaymentPage = t6;
	let t7;
	if ($[3] !== isHostedPaymentPage || $[4] !== onStatusChange || $[5] !== paymentAccounts?.length) {
		t7 = () => {
			const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
			const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
			setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
			onStatusChange && onStatusChange({ isValid: enableSubmitForm });
		};
		$[3] = isHostedPaymentPage;
		$[4] = onStatusChange;
		$[5] = paymentAccounts?.length;
		$[6] = t7;
	} else t7 = $[6];
	let t8;
	if ($[7] !== isHostedPaymentPage || $[8] !== paymentAccounts) {
		t8 = [isHostedPaymentPage, paymentAccounts];
		$[7] = isHostedPaymentPage;
		$[8] = paymentAccounts;
		$[9] = t8;
	} else t8 = $[9];
	useEffect(t7, t8);
	if (loadingPaymentAccounts) {
		let t9;
		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
			t9 = /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
			$[10] = t9;
		} else t9 = $[10];
		return t9;
	}
	if (!showHostedPaymentPage && paymentAccounts?.length > 0) {
		let t9;
		if ($[11] !== paymentAccounts || $[12] !== setSelectedPaymentAccount) {
			t9 = /* @__PURE__ */ React.createElement(PaymentDropdown, {
				paymentAccounts,
				setSelectedPaymentAccount,
				paymentType: PaymentTenderTypeEnum.CreditCard
			});
			$[11] = paymentAccounts;
			$[12] = setSelectedPaymentAccount;
			$[13] = t9;
		} else t9 = $[13];
		let t10;
		let t11;
		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
			t10 = /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("PaymentCardIcon") });
			t11 = { padding: "18px 20px" };
			$[14] = t10;
			$[15] = t11;
		} else {
			t10 = $[14];
			t11 = $[15];
		}
		let t12;
		if ($[16] !== actionLabel || $[17] !== t) {
			t12 = actionLabel || t("Enter Card Details");
			$[16] = actionLabel;
			$[17] = t;
			$[18] = t12;
		} else t12 = $[18];
		let t13;
		if ($[19] !== handleShowHostedPaymentPage || $[20] !== t12) {
			t13 = /* @__PURE__ */ React.createElement(Box, {
				textAlign: "center",
				mt: 3
			}, /* @__PURE__ */ React.createElement(FluentButton, {
				variant: "outlined",
				color: "primary",
				onClick: handleShowHostedPaymentPage,
				size: "small",
				startIcon: t10,
				style: t11
			}, t12));
			$[19] = handleShowHostedPaymentPage;
			$[20] = t12;
			$[21] = t13;
		} else t13 = $[21];
		let t14;
		if ($[22] !== t13 || $[23] !== t9) {
			t14 = /* @__PURE__ */ React.createElement(React.Fragment, null, t9, t13);
			$[22] = t13;
			$[23] = t9;
			$[24] = t14;
		} else t14 = $[24];
		return t14;
	}
	if (hasReadPropertiesError) {
		let t9;
		if ($[25] !== readPropertiesMessageError || $[26] !== t) {
			t9 = readPropertiesMessageError || t("Unknown error");
			$[25] = readPropertiesMessageError;
			$[26] = t;
			$[27] = t9;
		} else t9 = $[27];
		let t10;
		if ($[28] !== t9) {
			t10 = /* @__PURE__ */ React.createElement(HostedPaymentError, {
				error: "Error",
				message: t9
			});
			$[28] = t9;
			$[29] = t10;
		} else t10 = $[29];
		return t10;
	}
	let t9;
	if ($[30] !== classes || $[31] !== creditCardNumberInput || $[32] !== isFormDisabled || $[33] !== isHostedPaymentPage || $[34] !== paymentDetails || $[35] !== paymentProviderForm || $[36] !== showHostedPaymentPage) {
		t9 = showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewCreditCardForm, {
			isFormDisabled,
			classes,
			paymentDetails,
			creditCardNumberInput,
			setCreditCardNumberInput
		});
		$[30] = classes;
		$[31] = creditCardNumberInput;
		$[32] = isFormDisabled;
		$[33] = isHostedPaymentPage;
		$[34] = paymentDetails;
		$[35] = paymentProviderForm;
		$[36] = showHostedPaymentPage;
		$[37] = t9;
	} else t9 = $[37];
	return t9;
};
//#endregion
export { CreditCardForm };

//# sourceMappingURL=CreditCardForm.mjs.map