var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import { usePaymentProviderForm } from './usePaymentProviderForm';
import { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';
import { useUser } from '../../auth/useUser';
import { useAxiosGet } from '../../useAxiosGet';
import { Box } from '../../../UI/Box';
import { LinearProgress } from '../../../UI/loading/LinearProgress';
import PaymentDropdown from './PaymentDropdown';
import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
import { UnityFluentIcon } from '../../iconLibrary/UnityFluentIcon';
import { getIconFromName } from '../../tree/TreeUtilities';
import { HostedPaymentError } from './HostedPaymentError';
import { NewECheckForm } from './NewECheckForm';
import { ConfigService } from '../../../configService';
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.
 */
export const BankAccountForm = (_a) => {
    var { bankAccountTypes = [], data, externalId, isFormDisabled = false, providerType = null, providerProps = null, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, enabled, actionLabel, setSelectedPaymentAccount } = _a, restProps = __rest(_a, ["bankAccountTypes", "data", "externalId", "isFormDisabled", "providerType", "providerProps", "paymentDetails", "isHostedPaymentPage", "hasReadPropertiesError", "readPropertiesMessageError", "onStatusChange", "enabled", "actionLabel", "setSelectedPaymentAccount"]);
    const classes = useStyles();
    const { t } = useTranslation();
    const user = useUser();
    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
    const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
    // @ts-ignore
    const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, {}, false);
    const handleShowHostedPaymentPage = () => {
        setShowHostedPaymentPage(true);
        onStatusChange && onStatusChange({ isValid: false });
    };
    useEffect(() => {
        const showHostedPaymentPageByDefault = (isHostedPaymentPage && (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0);
        const enableSubmitForm = (isHostedPaymentPage === false || (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0);
        setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
        onStatusChange && onStatusChange({ isValid: enableSubmitForm });
    }, [isHostedPaymentPage, paymentAccounts]);
    if (loadingPaymentAccounts) {
        return (React.createElement(Box, { sx: { width: '100%' } }, React.createElement(LinearProgress, null)));
    }
    if (!showHostedPaymentPage && (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0) {
        return (React.createElement(React.Fragment, null, React.createElement(PaymentDropdown, { paymentAccounts: paymentAccounts, setSelectedPaymentAccount: setSelectedPaymentAccount, paymentType: PaymentTenderTypeEnum.ECheck }), React.createElement(Box, { textAlign: "center", mt: 3 }, React.createElement(FluentButton, { variant: "outlined", color: "primary", onClick: handleShowHostedPaymentPage, size: "small", startIcon: React.createElement(UnityFluentIcon, { icon: getIconFromName('BankIcon') }), style: { padding: "18px 20px" } }, actionLabel || t('Enter Bank Account Details')))));
    }
    if (hasReadPropertiesError) {
        return (React.createElement(HostedPaymentError, { error: "Error", message: readPropertiesMessageError || t('Unknown error') }));
    }
    return showHostedPaymentPage &&
        isHostedPaymentPage ?
        paymentProviderForm : (React.createElement(NewECheckForm, { isFormDisabled: isFormDisabled, classes: classes, bankAccountTypes: bankAccountTypes }));
};
//# sourceMappingURL=BankAccountForm.js.map