import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    PaymentEntityMultiSelect,
    PaymentEntityMultiSelectPropTypes,
} from 'src/components/shared/payment-entity-multiselect';
import { referencePaymentEntities } from 'src/__fixtures__/graphql/reference-payment-entity';
import * as referentPaymentEntityQuery from 'src/apollo/queries/reference-payment-entity';

describe('<PaymentEntityMultiSelect>', () => {
    const render = (props: PaymentEntityMultiSelectPropTypes) =>
        renderInAppContext(<PaymentEntityMultiSelect {...props} />);

    const props = {
        className: 'paymentEntity',
        onChange: jest.fn(),
        value: [],
    };

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            referentPaymentEntityQuery,
            'useReferencePaymentEntities'
        ).mockReturnValue({
            data: referencePaymentEntities,
            loading: false,
            error: undefined,
        });
    });

    it('renders <PaymentEntityMultiSelect>', () => {
        render(props);
        expect(screen.getByText('Select Paid By(s)')).toBeDefined();
    });

    it('displays dropdown options', async () => {
        render(props);
        fireEvent.click(screen.getByRole('combobox', { hidden: true }));
        await screen.findByTestId('SuiteListView');

        referencePaymentEntities.abacusReferencePaymentEntities.items.forEach(
            ({ paymentEntityName }) =>
                expect(screen.getByText(paymentEntityName)).toBeDefined()
        );

        expect(screen.getByText(/select all/i)).toBeInTheDocument();
    });

    it('shows selected payment entity option', () => {
        render({
            ...props,
            value: ['1', '2'],
        });
        expect(screen.getByText('AWAL-UK')).toBeDefined();
        expect(screen.getByText('AWAL-US')).toBeDefined();
    });

    it('shows Apply link if requireApply is true', async () => {
        render({ ...props, requireApply: true });

        fireEvent.click(screen.getByRole('combobox', { hidden: true }));

        await waitFor(() => {
            expect(screen.getByText('Apply')).toBeInTheDocument();
        });
    });
});