import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    SearchableSelectList,
    SearchableSelectListPropTypes,
} from '../searchable-select-list';

describe('<SearchableSelectList>', () => {
    const defaultProps = {
        id: 'searchbar',
        onChange: jest.fn(),
        placeholder: 'Search for label...',
        defaultOptions: [],
        searchTerm: '',
        onLoadOptionsHandler: jest
            .fn()
            .mockReturnValueOnce(new Promise(resolve => resolve([]))),
    };

    const render = (props: SearchableSelectListPropTypes) =>
        renderInAppContext(<SearchableSelectList {...props} />);

    it('renders component and displays Search icon', () => {
        render(defaultProps);
        expect(screen.getByTestId('searchableSelectListTestid')).toBeDefined();
        const searchIcon = screen.getByTestId('SearchGlyphIcon');
        expect(searchIcon).toBeDefined();
    });

    it('displays message when there are no search results', async () => {
        render({ ...defaultProps, searchTerm: 'testing' });
        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: 'label' },
        });
        const noResults = await screen.findByText(
            'Sorry, no results matched your criteria'
        );
        expect(noResults).toBeDefined();
    });

    it('renders dropdown when input changes', async () => {
        const mockData = [
            { label: 'Test', value: 1 },
            { label: 'test300819', value: 5 },
        ];
        const resultProps = {
            ...defaultProps,
            onLoadOptionsHandler: jest
                .fn()
                .mockReturnValueOnce(new Promise(resolve => resolve(mockData))),
        };
        render(resultProps);

        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: 'test' },
        });
        await waitFor(() => {
            expect(screen.getByText('test300819')).toBeDefined();
            expect(screen.getByText('Test')).toBeDefined();
        });
    });
});