import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { ToastProvider } from '@theorchard/suite-components';
import { renderInAppContext } from '@theorchard/suite-testing';
import { referencePaymentEntities } from 'src/__fixtures__/graphql/reference-payment-entity';
import * as paymentGroupMutations from 'src/apollo/mutations/payment-group';
import * as refPaymentEntitiesQuery from 'src/apollo/queries/reference-payment-entity';
import NewPaymentGroupForm from 'src/components/payment-group/new-payment-group-form';

describe('<NewPaymentGroupForm />', () => {
    const addPaymentGroup = jest.fn().mockResolvedValue({});
    const props = {
        setIsSidecarOpen: jest.fn(),
        isSidecarOpen: true,
        refetchCurrentPage: jest.fn(),
    };

    const render = () =>
        renderInAppContext(
            <ToastProvider>
                <NewPaymentGroupForm {...props} />
            </ToastProvider>
        );
    afterEach(jest.restoreAllMocks);

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

    it('renders payment group form', () => {
        render();

        expect(screen.getByText('New Payment Group')).toBeDefined();
        expect(screen.getByText('Group Name')).toBeDefined();
        expect(screen.getByText('Payment Currency')).toBeDefined();
        expect(screen.getByText('Paid By')).toBeDefined();
        expect(screen.getByText('Payment Schedule')).toBeDefined();
        expect(screen.getByText('Agreement Type')).toBeDefined();
    });

    it('disables the create button when input is a blank string', () => {
        render();

        const createButton = screen.getByRole('button', {
            name: /Create/i,
        });
        expect(createButton).toBeDisabled();
    });

    it('creates a payment group when the create button is clicked', async () => {
        render();

        const createButton = screen.getByRole('button', {
            name: /Create/i,
        });
        expect(createButton).toBeDisabled();

        const paymentEntitySelect = screen
            .getByTestId('Dropdown_paymentEntity')
            .querySelector('input') as HTMLInputElement;

        fireEvent.change(screen.getByTestId('payment-group-name'), {
            target: { value: 'Test group name' },
        });

        fireEvent.change(paymentEntitySelect, {
            target: { value: 'AWAL-UK' },
        });
        fireEvent.keyDown(paymentEntitySelect, {
            key: 'Enter',
            keyCode: 13,
            which: 13,
        });

        expect(createButton).not.toBeDisabled();

        fireEvent.click(createButton);

        await waitFor(() => {
            expect(addPaymentGroup).toHaveBeenCalled();
        });

        expect(await screen.findByText('Payment group created')).toBeTruthy();
    });
});