import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { referenceSigningEntities } from 'src/__fixtures__/graphql/reference-signing-entity';
import * as signingEntitiesQuery from 'src/apollo/queries/reference-signing-entity';
import {
    ReferenceSigningEntityMultiDropdown,
    ReferenceSigningEntityMultiDropdownPropTypes,
} from 'src/components/shared/reference-signing-entity-multi-dropdown';

describe('<ReferenceSigningEntityMultiDropdown> layout', () => {
    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            signingEntitiesQuery,
            'useReferenceSigningEntities'
        ).mockReturnValue({
            data: referenceSigningEntities,
            loading: false,
            error: undefined,
        });
    });

    const defaultProps: ReferenceSigningEntityMultiDropdownPropTypes = {
        id: 'signingEntity',
        onChange: jest.fn(),
        placeholder: 'Please Select',
        paymentEntityId: null,
        value: '',
    };

    const renderComponent = (
        props: ReferenceSigningEntityMultiDropdownPropTypes = defaultProps
    ) => renderInAppContext(<ReferenceSigningEntityMultiDropdown {...props} />);

    it('renders with specified placeholder', () => {
        renderComponent();
        expect(screen.getByText(defaultProps.placeholder!)).toBeInTheDocument();
    });

    it('includes all signing entity options when payment entity ID is not specified', async () => {
        const expectedOptions =
            referenceSigningEntities.abacusReferenceSigningEntities.items;
        renderComponent();

        const selectButton = screen.getByRole('button');
        fireEvent.click(selectButton);

        await waitFor(() => {
            expect(
                screen.getByText(expectedOptions[0].legalName)
            ).toBeInTheDocument();
        });

        expectedOptions.forEach(option =>
            expect(screen.getByText(option.legalName)).toBeInTheDocument()
        );
    });

    it('filters signing entity options by payment entity ID when specified', async () => {
        const paymentEntityId = '1';
        const expectedOptions =
            referenceSigningEntities.abacusReferenceSigningEntities.items.filter(
                item =>
                    item.referencePaymentEntity.referencePaymentEntityId ===
                    paymentEntityId
            );
        const otherOptions =
            referenceSigningEntities.abacusReferenceSigningEntities.items.filter(
                item =>
                    item.referencePaymentEntity.referencePaymentEntityId !==
                    paymentEntityId
            );

        renderComponent({ ...defaultProps, paymentEntityId });

        const selectButton = screen.getByRole('button');
        fireEvent.click(selectButton);

        await waitFor(() => {
            expect(
                screen.getByText(expectedOptions[0].legalName)
            ).toBeInTheDocument();
        });

        expectedOptions.forEach(option =>
            expect(screen.getByText(option.legalName)).toBeInTheDocument()
        );
        otherOptions.forEach(option =>
            expect(screen.queryByText(option.legalName)).not.toBeInTheDocument()
        );
    });
});