import React from 'react';
import * as apollo from '@apollo/client';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import VendorSearch, { getOptionName } from '../vendorSearch';

describe('<VendorSearch>', () => {
    const onChange = jest.fn();
    const renderComponent = () => renderInAppContext(
        <VendorSearch
            onChange={onChange}
        />
    );

    const queryData = {
        orchardLabelSearch: [
            {
                uuid: '1234',
                name: 'Vendor A'
            },
            {
                uuid: '4321',
                name: 'Vendor B'
            }
        ]
    };

    const mockQuery = () =>
        jest.spyOn(apollo, 'useLazyQuery').mockReturnValue([
            jest.fn(),
            {
                data: queryData,
                loading: false
            } as apollo.QueryResult,
        ]);

    test('calls onChange if item changed', () => {
        mockQuery();
        const { container, getByText } = renderComponent();
        const input = container.querySelector('input');

        if (input)
            fireEvent.change(input, { target: { value: 'Vendor A' } });
        fireEvent.click(getByText(getOptionName({ id: '1234', name: 'Vendor A' })));

        expect(onChange).toHaveBeenCalledWith({ id: '1234', name: 'Vendor A' });
    });

    test('filters items based on search term', () => {
        mockQuery();
        const { container, queryByText } = renderComponent();
        const input = container.querySelector('input');

        if (input)
            fireEvent.change(input, { target: { value: 'Vendor B' } });

        const firstOption = queryByText(getOptionName({ id: '1234', name: 'Vendor A' }));
        const secondOption = queryByText(getOptionName({ id: '4321', name: 'Vendor B' }));

        expect(secondOption).toBeVisible();
        expect(firstOption).toBeNull();
    });
});