import React from 'react';
import { FormControl, FormControlLabel, } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import { Field } from '../Field';
import { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';
import { FluentCheckbox } from '../../../UI/inputs/checkbox/FluentCheckbox';
import { FluentSelectMenu } from '../../../UI/inputs/menus/FluentSelectMenu';
import { Typography } from '../../../UI/dataDisplay/typography/Typography';
import { formatBankAccountNumber, formatRoutingNumber, } from './CreditCardUtils';
import { PaymentCard } from './PaymentCard';
/**
 * 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 NewECheckForm = ({ isFormDisabled, classes, bankAccountTypes, }) => {
    const { t } = useTranslation();
    return (React.createElement(PaymentCard, null, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    // @ts-ignore
    , { 
        // @ts-ignore
        component: FluentTextField, ComponentProps: {
            // @ts-ignore
            label: t('Name on Bank Account'),
            variant: 'outlined',
            size: 'small',
            disabled: isFormDisabled,
            fullWidth: true,
            inputProps: { maxLength: 256 }
        }, name: "accountNickName", initialValue: "", required: !isFormDisabled })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    // @ts-ignore
    , { 
        // @ts-ignore
        component: FluentTextField, ComponentProps: {
            // @ts-ignore
            label: t('Account Number'),
            variant: 'outlined',
            size: 'small',
            disabled: isFormDisabled,
            fullWidth: true
        }, name: "accountNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{16,22}", format: formatBankAccountNumber })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    //@ts-ignore
    , { 
        //@ts-ignore
        component: FluentSelectMenu, ComponentProps: {
            label: t('Account Type'),
            id: 'bankAccountType',
            variant: 'outlined',
            margin: 'normal',
            size: 'small',
            width: '100%',
            fullWidth: true,
            disabled: false,
            data: bankAccountTypes || [],
            displayProperty: 'name',
            autoCompleteProps: {
                disableClearable: true
            }
        }, valueForChange: (e) => {
            return e.value;
        }, name: "bankAccountType", required: !isFormDisabled, onChange: () => { } })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
    // @ts-ignore
    , { 
        // @ts-ignore
        component: FluentTextField, ComponentProps: {
            // @ts-ignore
            label: t('Routing Number'),
            variant: 'outlined',
            size: 'small',
            disabled: isFormDisabled,
            fullWidth: true
        }, name: "routingNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{9}", format: formatRoutingNumber })), 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 }), label: React.createElement(Typography, null, t('Save')) }))));
};
//# sourceMappingURL=NewECheckForm.js.map