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

export interface ContractFlowthroughCalculationCommentProps {
    abacusContractFlowthroughCalculationComment: string | null;
    handleFormChange: (
        // eslint-disable-next-line no-unused-vars
        formField: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
}

export const ContractFlowthroughCalculationComment: React.FC<
    ContractFlowthroughCalculationCommentProps
> = ({ abacusContractFlowthroughCalculationComment, handleFormChange }) => {
    return (
        <>
            <Form.Group>
                <Field
                    controlId="calculationComment"
                    labelText="Calculation Comment"
                >
                    <Form.Control
                        className="ContractFlowthroughFormFields-CalculationComment"
                        data-testid="contractFlowthroughCalculationComment"
                        name="calculationComment"
                        as="textarea"
                        rows={5}
                        placeholder="Describe the calculation method"
                        onChange={e => {
                            handleFormChange(
                                e.target.name,
                                e.target.value === '' ? null : e.target.value
                            );
                        }}
                        value={
                            abacusContractFlowthroughCalculationComment || ''
                        }
                    />
                </Field>
            </Form.Group>
        </>
    );
};