import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ClearableInput, { Props } from '../clearableInput';

describe('ClearableInput', () => {
    const testId = 'clearable-input';

    const renderWrapper = (props?: Partial<Props>) =>
        renderInAppContext(<ClearableInput data-testid={testId} {...props} />);

    test('renders without crashing', () => {
        const { getByTestId } = renderWrapper();
        expect(getByTestId(testId)).toBeInTheDocument();
    });

    test('renders the input field with a label', () => {
        const { getByText } = renderWrapper({ labelText: 'Account Name' });
        expect(getByText('Account Name')).toBeInTheDocument();
    });

    test('renders the clear button when selectedValue is provided', () => {
        const { getByTestId } = renderWrapper({ selectedValue: 'Test Value' });
        expect(getByTestId('clearable-input-clear-button')).toBeInTheDocument();
    });

    it('does not renders the clear button when selectedValue is not provided', () => {
        const { queryByTestId } = renderWrapper({ selectedValue: '' });
        expect(queryByTestId('clearable-input-clear-button')).toBeNull();
    });

    test('calls onChange when the input value changes', () => {
        const handleChange = jest.fn();
        const { container } = renderWrapper({ onChange: handleChange });

        const input = container.getElementsByClassName('form-control').item(0);
        if (input) fireEvent.change(input, { target: { value: 'New Value' } });
        expect(handleChange).toHaveBeenCalledTimes(1);
    });

    test('clears input value when clear button is clicked', () => {
        const handleChange = jest.fn();
        const { getByTestId } = renderWrapper({
            selectedValue: 'Test Value',
            onChange: handleChange,
        });
        const clearButton = getByTestId('clearable-input-clear-button');
        expect(clearButton).toBeInTheDocument();

        fireEvent.click(clearButton);

        expect(handleChange).toHaveBeenCalledWith({
            target: { name: '', type: 'input', value: '' },
        });
    });
});