import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box } from '../../../UI/Box';
import { Field } from '../Field';
import { FluentCheckbox } from '../../../UI/inputs/checkbox/FluentCheckbox';
import { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';
import { FormControl } from '../../../UI/utilityDisplay/FormControl';
import { FormControlLabel } from '../../../UI/utilityDisplay/FormControlLabel';
import { Typography } from '../../../UI/dataDisplay/typography/Typography';
import { PaymentCard } from './PaymentCard';
import { formatCreditCardNumber, formatCVC, formatExpirationDate } from './CreditCardUtils';
import { CreditCardAdornment } from './CreditCardAdornment';
/**
 * 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.
 */
export const NewCreditCardForm = ({ isFormDisabled, classes, creditCardNumberInput, paymentDetails, setCreditCardNumberInput, }) => {
    const { accountNumber } = paymentDetails || {};
    const { t } = useTranslation();
    return (React.createElement(PaymentCard, null, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field, { component: FluentTextField, ComponentProps: {
            label: t("Cardholder"),
            variant: "outlined",
            size: "small",
            disabled: isFormDisabled,
            fullWidth: true,
        }, name: "nameOnCard", initialValue: "", required: !isFormDisabled, onChange: () => { } })), React.createElement(FormControl, { className: classes.cardNumber }, React.createElement(Field, { component: FluentTextField, ComponentProps: {
            label: t("Card Number"),
            variant: "outlined",
            size: "small",
            disabled: isFormDisabled,
            fullWidth: true,
            InputProps: {
                startAdornment: React.createElement(CreditCardAdornment, { creditCardNumberInput: creditCardNumberInput }),
            },
        }, name: "cardNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{16,22}", format: formatCreditCardNumber, onChange: (e) => setCreditCardNumberInput(e.target.value) })), React.createElement(Box, { display: "flex", flexDirection: "row", alignItems: "flex-start", padding: "0px", width: "100%", style: { gap: '10px' } }, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    // @ts-ignore
    , { 
        // @ts-ignore
        component: FluentTextField, ComponentProps: {
            label: t("Expiry Date"),
            variant: "outlined",
            margin: "normal",
            size: "small",
            width: "100%",
            disabled: isFormDisabled,
            fullWidth: true
        }, name: "expiryDate", helperText: "MM/YY", initialValue: "", required: !isFormDisabled, pattern: "\\d\\d/\\d\\d", format: formatExpirationDate, onChange: () => { } })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    // @ts-ignore
    , { 
        // @ts-ignore
        component: FluentTextField, ComponentProps: {
            label: "CVV",
            variant: "outlined",
            margin: "normal",
            size: "small",
            width: "100%",
            disabled: isFormDisabled,
            fullWidth: true
        }, name: "cvv", helperText: t("3-digit code on back"), initialValue: "", required: !isFormDisabled, pattern: "\\d{3,4}", format: formatCVC, onChange: () => { } }))), React.createElement(FormControl, { className: classes.formControlCheck }, React.createElement(FormControlLabel, { control: React.createElement(Field, { component: FluentCheckbox, name: "isSaveAsNewMethod", type: "checkbox", defaultValue: false, 
            // @ts-ignore
            disabled: isFormDisabled, required: false, onChange: () => { } }), label: React.createElement(Typography, null, accountNumber ?
            React.createElement("span", null, t('Save this card to'), " ", React.createElement("strong", null, " ", t('Account'), " ", accountNumber), " ", t('file'))
            :
                t('Save')) }))));
};
//# sourceMappingURL=NewCreditCardForm.js.map