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, { useState, useEffect } from 'react';
import { Box, makeStyles } from '@material-ui/core';
import { UnityFluentIcon } from '../../iconLibrary/UnityFluentIcon';
import { getIconFromName } from '../../tree/TreeUtilities';
import { useTranslation } from 'react-i18next';
import { usePaymentProviderForm } from './usePaymentProviderForm';
import { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';
import { LinearProgress } from '../../../UI/loading/LinearProgress';
import { useUser } from '../../auth/useUser';
import { useAxiosGet } from '../../useAxiosGet';
import PaymentDropdown from './PaymentDropdown';
import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
import { HostedPaymentError } from './HostedPaymentError';
import { NewCreditCardForm } from './NewCreditCardForm';
import { ConfigService } from '../../../configService';
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.
 */
export const CreditCardForm = (_a) => {
    var { isFormDisabled = false, data, externalId, paymentDetails, providerType = null, providerProps = null, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, enabled, actionLabel, onStatusChange, setSelectedPaymentAccount } = _a, restProps = __rest(_a, ["isFormDisabled", "data", "externalId", "paymentDetails", "providerType", "providerProps", "isHostedPaymentPage", "hasReadPropertiesError", "readPropertiesMessageError", "enabled", "actionLabel", "onStatusChange", "setSelectedPaymentAccount"]);
    const { t } = useTranslation();
    const classes = useStyles();
    const user = useUser();
    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
    const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
    const [creditCardNumberInput, setCreditCardNumberInput] = useState('');
    // @ts-ignore
    const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${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 (
        // @ts-ignore
        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.CreditCard }), React.createElement(Box, { textAlign: "center", mt: 3 }, React.createElement(FluentButton, { variant: "outlined", color: "primary", onClick: handleShowHostedPaymentPage, size: "small", startIcon: React.createElement(UnityFluentIcon, { icon: getIconFromName('PaymentCardIcon') }), style: { padding: "18px 20px" } }, actionLabel || t('Enter Card Details')))));
    }
    if (hasReadPropertiesError) {
        return (React.createElement(HostedPaymentError, { error: "Error", message: readPropertiesMessageError || t('Unknown error') }));
    }
    return showHostedPaymentPage &&
        isHostedPaymentPage ?
        paymentProviderForm : (React.createElement(NewCreditCardForm, { isFormDisabled: isFormDisabled, classes: classes, paymentDetails: paymentDetails, creditCardNumberInput: creditCardNumberInput, setCreditCardNumberInput: setCreditCardNumberInput }));
};
//# sourceMappingURL=CreditCardForm.js.map