import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { NrDeliveryOrderStatus } from 'src/data/globalTypes';
import * as ordersQuery from '../../../data/queries/nrDeliveryOrders/nrDeliveryOrders';
import OrderIdSearchDropdown from '../orderIdSearchDropdown';

describe('<OrderIdSearchDropdown>', () => {
    const onChange = jest.fn();
    const renderComponent = () =>
        renderInAppContext(
            <OrderIdSearchDropdown
                onChange={onChange}
                selectedOrderId={undefined}
                placeholder="placeholder"
            />
        );

    const queryData = [
        {
            cmo: 'PPL',
            createdAt: 'yesterday',
            lastUpdated: '2022-04-14T21:00:00.257Z',
            createdBy: 'Allan Moon',
            orderId: '12345',
            outputFile: 'Report file A',
            numberOfJobs: 4,
            reDeliver: 'Yes',
            status: NrDeliveryOrderStatus.SUCCESS,
        },
        {
            cmo: 'GVL',
            createdAt: 'yesterday',
            lastUpdated: '2022-04-14T21:00:00.257Z',
            createdBy: 'Allan Moon',
            orderId: '9876',
            outputFile: 'Report file B',
            numberOfJobs: 2,
            reDeliver: 'Yes',
            status: NrDeliveryOrderStatus.SUCCESS,
        },
    ];

    const mockQueries = () => {
        jest.spyOn(ordersQuery, 'useDeliveryOrderSearchQuery').mockReturnValue([
            jest.fn(),
            {
                data: { totalCount: 1, items: [queryData[0]] },
                loading: false,
                error: undefined,
            },
        ]);
        jest.spyOn(ordersQuery, 'useGetDeliveryOrdersQuery').mockReturnValue({
            data: { totalCount: 2, items: queryData },
            loading: false,
            error: undefined,
            fetchMore: jest.fn(),
            fetchingMore: false,
            startPolling: jest.fn(),
            stopPolling: jest.fn(),
        });
    };

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

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

        expect(onChange).toHaveBeenCalledWith({ orderId: '12345' });
    });

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

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

        const firstOption = queryByText('12345');
        const secondOption = queryByText('9876');

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