import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { NrContributorDeliveryStoreStatus } from 'src/data/globalTypes';
import * as contributorsQuery from 'src/data/queries/getAllNrContributors/getAllNrContributors';
import * as contributorsByNrSrQuery from 'src/data/queries/getContributorsByNrSrId/getContributorsByNrSrId';
import * as contributorByIdQuery from 'src/data/queries/nrContributorById/nrContributorById';
import * as contributorSearchQuery from 'src/data/queries/nrContributorSearch/nrContributorSearch';
import ContributorSearchDropdown from '../contributorSearchDropdown';

describe('<ContributorSearchDropdown>', () => {
    const queryData = [
        {
            id: 'u2491414214',
            name: 'Contributor A',
            stores: [
                {
                    deliveryStore: {
                        name: 'test',
                    },
                    status: NrContributorDeliveryStoreStatus.REGISTERED,
                },
            ],
        },
        {
            id: 'a123414142315',
            name: 'Contributor B',
            stores: [
                {
                    deliveryStore: {
                        name: 'test',
                    },
                    status: NrContributorDeliveryStoreStatus.REGISTERED,
                },
            ],
        },
    ];
    const onChange = jest.fn();
    const renderComponent = (
        soundRecordingId?: string,
        contributorId?: string
    ) =>
        renderInAppContext(
            <ContributorSearchDropdown
                onChange={onChange}
                contributorId={contributorId}
                placeholder="placeholder"
                soundRecordingId={soundRecordingId}
            />
        );

    describe('when soundRecordingId passed in', () => {
        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(
                contributorsByNrSrQuery,
                'useGetNrContributorsByNrSr'
            ).mockReturnValue({
                fetchingMore: false,
                isLoading: false,
                data: queryData,
                error: undefined,
                fetchMore: jest.fn(),
            });
            jest.spyOn(
                contributorsQuery,
                'useGetAllNrContributors'
            ).mockReturnValue({
                data: { totalCount: 2, contributors: queryData },
                isLoading: false,
                error: undefined,
                fetchMore: jest.fn(),
                fetchingMore: false,
            });
        };

        beforeEach(() => {
            mockQueries();
        });

        afterEach(() => {
            jest.resetAllMocks();
        });

        test('renders with default value', () => {
            const { getByText } = renderComponent('1236-abcde');
            const input = getByText('Contributor A');

            expect(input).toBeVisible();
        });

        test('renders selected contributor', () => {
            const selectedContributor = queryData[1];
            jest.spyOn(
                contributorByIdQuery,
                'useNrContributorByIdQuery'
            ).mockReturnValue({
                data: queryData.find(
                    ({ id }: { id: string }) => id === selectedContributor.id
                ),
                loading: false,
                error: undefined,
            });
            const { getByText } = renderComponent(
                '1236-abcde',
                selectedContributor.id
            );
            const input = getByText(selectedContributor.name);

            expect(input).toBeVisible();

            expect(onChange).not.toHaveBeenCalled();
        });
    });
});