import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as vendorByIdResponse from 'src/__fixtures__/graphql/vendor-by-id-response.json';
import * as vendorSearchResponse from 'src/__fixtures__/graphql/vendor-search-response.json';
import * as vendorQuery from 'src/apollo/queries/vendor-search';
import LabelSearchableSelect, {
    LabelSearchableSelectPropTypes,
} from 'src/components/shared/label-searchable-select';
import type { GetVendorByIdQuery } from 'src/apollo/queries/vendor-search/__generated__/get-vendor-by-id';
import type { GetVendorsQuery } from 'src/apollo/queries/vendor-search/__generated__/get-vendors';

describe('<LabelSearchableSelect/>', () => {
    const props: LabelSearchableSelectPropTypes = {
        onChange: jest.fn(),
        isMultiSelect: true,
        vendorCatalogIds: [],
    };

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

    afterEach(jest.restoreAllMocks);
    beforeEach(() => {
        jest.spyOn(vendorQuery, 'useVendorSearch').mockReturnValue(
            async () =>
                await Promise.resolve(
                    vendorSearchResponse.orchardLabelSearch as GetVendorsQuery['orchardLabelSearch']
                )
        );
        jest.spyOn(vendorQuery, 'useVendorById').mockReturnValue({
            data: vendorByIdResponse as GetVendorByIdQuery,
            loading: false,
            getVendorById: jest.fn().mockReturnValue(vendorByIdResponse),
        });
    });

    it('renders', () => {
        render();
        expect(screen.getByRole('combobox')).toBeDefined();
    });

    it('searches labels on input change', async () => {
        render();
        const labelSelect = screen.getByRole('combobox');
        fireEvent.change(labelSelect, { target: { value: 'SME' } });
        await waitFor(() => {
            expect(
                screen.getByText(
                    "(SME France) Ulysse maison d'artistes (28435)"
                )
            ).toBeDefined();
            expect(
                screen.getByText('(SME France) SOULMATES (33080)')
            ).toBeDefined();
            expect(
                screen.getByText('(SME France) Simone Records (32486)')
            ).toBeDefined();
        });
    });
});