import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as contributorsQuery from 'src/data/queries/getAllNrContributors/getAllNrContributors';
import * as registeredContributorsQuery from 'src/data/queries/getRegisteredContributors/getRegisteredContributors';
import * as contributorByIdQuery from 'src/data/queries/nrContributorById/nrContributorById';
import * as contributorSearchQuery from 'src/data/queries/nrContributorSearch/nrContributorSearch';
import ContributorsSearchDropdown, {
    Props,
} from '../contributorsSearchDropdown';

describe('<ContributorsSearchDropdown>', () => {
    const onChange = jest.fn();
    const renderComponent = (props: Partial<Props> = {}) =>
        renderInAppContext(
            <ContributorsSearchDropdown
                onChange={onChange}
                contributorId={undefined}
                placeholder="placeholder"
                {...props}
            />
        );

    const queryData = [
        {
            id: 'u2491414214',
            name: 'Contributor A',
        },
        {
            id: 'a123414142315',
            name: 'Contributor B',
        },
    ];

    const mockQueries = () => {
        jest.spyOn(
            contributorByIdQuery,
            'useNrContributorByIdQuery'
        ).mockReturnValue({
            data: queryData[0],
            loading: false,
            error: undefined,
        });
        jest.spyOn(
            contributorSearchQuery,
            'useNrContributorSearchQuery'
        ).mockReturnValue([
            jest.fn(),
            {
                data: queryData,
                loading: false,
            },
        ]);
        jest.spyOn(
            contributorsQuery,
            'useGetAllNrContributors'
        ).mockReturnValue({
            data: { totalCount: 2, contributors: queryData },
            isLoading: false,
            error: undefined,
            fetchMore: jest.fn(),
            fetchingMore: false,
        });
    };

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

        if (input)
            fireEvent.change(input, { target: { value: 'Contributor A' } });
        fireEvent.click(getByText('Contributor A'));

        expect(onChange).toHaveBeenCalledWith({
            id: 'u2491414214',
            name: 'Contributor A',
        });
    });

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

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

        const firstOption = queryByText('Contributor A');
        const secondOption = queryByText('Contributor B');

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

    describe('when showEligible is enabled', () => {
        const mockEligibleQueries = () => {
            jest.spyOn(
                contributorByIdQuery,
                'useNrContributorByIdQuery'
            ).mockReturnValue({
                data: queryData[0],
                loading: false,
                error: undefined,
            });
            jest.spyOn(
                registeredContributorsQuery,
                'useGetRegisteredContributors'
            ).mockReturnValue({
                data: queryData,
                loading: false,
                error: undefined,
            });
        };
        test('calls onChange if item changed', () => {
            mockEligibleQueries();
            const { container, getByText } = renderComponent({
                showEligible: true,
                storeId: '1604',
            });
            const input = container.querySelector('input');

            if (input)
                fireEvent.change(input, { target: { value: 'Contributor A' } });
            fireEvent.click(getByText('Contributor A'));

            expect(onChange).toHaveBeenCalledWith({
                id: 'u2491414214',
                name: 'Contributor A',
            });
        });
    });
});