import React from 'react';
import { Field, Form } from '@theorchard/suite-components';
import type { ContractTermFormItem } from 'src/types/abacus-contract-term-form-item';
import type { AbacusContractTermsInputErrors } from 'src/types/abacus-contract-terms-distro-input-errors';

export interface ContractTermNamePropTypes {
    contractTermName: string | undefined;
    handleFormChange: (
        // eslint-disable-next-line no-unused-vars
        fieldName: keyof ContractTermFormItem,
        // eslint-disable-next-line no-unused-vars
        inputValue: string
    ) => void;
    handleFormChangeValidation: (
        // eslint-disable-next-line no-unused-vars
        fieldName: keyof ContractTermFormItem,
        // eslint-disable-next-line no-unused-vars
        inputValue: string
    ) => void;
    errors: AbacusContractTermsInputErrors;
}

export const ContractTermName: React.FC<ContractTermNamePropTypes> = ({
    contractTermName,
    handleFormChange,
    handleFormChangeValidation,
    errors,
}) => {
    const controlId = 'contractTermName';

    return (
        <Field
            className="ContractTermsDistroFormFields-TermName"
            controlId={controlId}
            labelText="Term Name"
            message={
                errors?.contractTermName
                    ? { type: 'error', text: errors.contractTermName }
                    : undefined
            }
            testId="contract-term-name-field"
            isOptional={false}
        >
            <Form.Control
                name="contractTermName"
                isInvalid={!!errors?.contractTermName}
                value={contractTermName ?? ''}
                onChange={e => {
                    handleFormChange('contractTermName', e.target.value);
                }}
                onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
                    handleFormChangeValidation(
                        'contractTermName',
                        e.target.value
                    );
                }}
                type="text"
                data-testid="contract-term-name-input"
            />
        </Field>
    );
};