import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { ContractTermName } from 'src/components/contract-terms-refactored/contract-terms-distro-term-name';

describe('ContractTermName', () => {
    const defaultProps = {
        contractTermName: undefined as string | undefined,
        handleFormChange: jest.fn(),
        handleFormChangeValidation: jest.fn(),
        errors: {} as Record<string, string>,
    };

    const render = (props = defaultProps) =>
        renderInAppContext(<ContractTermName {...props} />);

    beforeEach(() => {
        jest.clearAllMocks();
    });

    it('renders the "Term Name" label and input field', () => {
        render();
        expect(
            screen.getByTestId('contract-term-name-field')
        ).toBeInTheDocument();
    });

    it('renders the input field with the given value', () => {
        const props = {
            ...defaultProps,
            contractTermName: 'Test Term',
        };
        render(props);
        const input = screen.getByTestId(
            'contract-term-name-input'
        ) as HTMLInputElement;
        expect(input).toBeInTheDocument();
        expect(input.value).toBe('Test Term');
    });

    it('calls handleFormChange when the input value changes', () => {
        render();
        const input = screen.getByTestId('contract-term-name-input');
        fireEvent.change(input, { target: { value: 'Test Term' } });
        expect(defaultProps.handleFormChange).toHaveBeenCalledWith(
            'contractTermName',
            'Test Term'
        );
    });

    it('calls handleFormChangeValidation on blur', () => {
        render();
        const input = screen.getByTestId('contract-term-name-input');
        fireEvent.blur(input, { target: { value: 'Test Term' } });
        expect(defaultProps.handleFormChangeValidation).toHaveBeenCalledWith(
            'contractTermName',
            'Test Term'
        );
    });

    it('renders the error message when errors.contractTermName is provided', () => {
        const props = {
            ...defaultProps,
            errors: {
                contractTermName: 'Term name is required.',
            },
        };
        render(props);
        expect(screen.getByText('Term name is required.')).toBeInTheDocument();
    });
});