import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { PhysicalDeliveryType } from 'src/data/globalTypes';
import * as accountByIdQuery from 'src/data/queries/accountById/accountById';
import * as useAccountSearchLazyQuery from 'src/data/queries/accountSearch/accountSearch';
import * as useAccountsWithProductsQuery from 'src/data/queries/getAccountsWithProducts/getAccountsWithProducts';
import AccountSearchDropdown from '../accountSearchDropdown';

describe('<AccountSearchDropdown>', () => {
    const onChange = jest.fn();
    const renderComponent = () =>
        renderInAppContext(
            <AccountSearchDropdown
                onChange={onChange}
                accountId={undefined}
                placeholder="placeholder"
                deliveryType={PhysicalDeliveryType.NEW}
                storeId="1705"
            />
        );

    const queryData = [
        {
            id: 1234,
            uuid: 'u2491414214',
            name: 'Account A',
        },
        {
            id: 4321,
            uuid: 'u2491414214',
            name: 'Account B',
        },
    ];

    const accountIdData = {
        id: 123,
        uuid: '123',
        name: 'name',
    };

    const mockQueries = () => {
        jest.spyOn(accountByIdQuery, 'useAccountByIdQuery').mockReturnValue({
            data: accountIdData,
            loading: false,
            error: undefined,
        });
        jest.spyOn(
            useAccountSearchLazyQuery,
            'useAccountSearchLazyQuery'
        ).mockReturnValue([
            jest.fn(),
            {
                data: queryData,
                loading: false,
            },
        ]);
        jest.spyOn(
            useAccountsWithProductsQuery,
            'useAccountsWithProductsQuery'
        ).mockReturnValue({
            data: queryData,
            loading: false,
            error: undefined,
        });
    };

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

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

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

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

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

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

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

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

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