import React from 'react';
import { Form, Field } from '@theorchard/suite-components';

export interface ContractFlowthroughRecoupmentCapProps {
    abacusContractFlowthroughRecoupmentCap: number | null;
    errors: any;
    handleFormChange: (
        // eslint-disable-next-line no-unused-vars
        formField: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
    handleFormChangeValidation: (
        // eslint-disable-next-line no-unused-vars
        formField: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
}

export const ContractFlowthroughRecoupmentCap: React.FC<
    ContractFlowthroughRecoupmentCapProps
> = ({
    abacusContractFlowthroughRecoupmentCap,
    errors,
    handleFormChange,
    handleFormChangeValidation,
}) => {
    if (abacusContractFlowthroughRecoupmentCap) {
        abacusContractFlowthroughRecoupmentCap =
            abacusContractFlowthroughRecoupmentCap || null;
    }

    return (
        <>
            <Form.Group>
                <Field
                    controlId="recoupmentCap"
                    labelText="Recoupment Cap"
                    errorMessage={errors?.recoupmentCap || undefined}
                >
                    <Form.Control
                        className="ContractFlowthroughFormFields-RecoupmentCap"
                        data-testid="contractFlowthroughRecoupmentCap"
                        name="recoupmentCap"
                        type="text"
                        placeholder="Input Value"
                        isInvalid={!!errors?.recoupmentCap}
                        onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
                            handleFormChangeValidation(
                                e.target.name,
                                e.target.value
                            );
                        }}
                        onChange={e => {
                            handleFormChange(
                                e.target.name,
                                e.target.value === '' ? null : e.target.value
                            );
                        }}
                        value={abacusContractFlowthroughRecoupmentCap || ''}
                    />
                </Field>
            </Form.Group>
        </>
    );
};