import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import userEvent from '@testing-library/user-event';
import {
    ApplyToFlowthroughPaymentSelect,
    ApplyToFlowthroughPaymentSelectPropTypes,
} from 'src/components/adjustments/apply-to-flowthrough-payment-select';

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

    const props: ApplyToFlowthroughPaymentSelectPropTypes = {
        compact: true,
        isDisabled: false,
        onChange: jest.fn(),
    };

    it('renders "Apply To Flowthrough Payment" filter', () => {
        render(props);

        expect(screen.getByText('Apply To Flowthrough Payment')).toBeDefined();
        expect(screen.getByRole('combobox', { hidden: true })).toBeDefined();
    });

    it('renders options in dropdown', async () => {
        render(props);

        const expandButton = screen.getByTestId('SuiteListViewExpandButton');
        fireEvent.click(expandButton);

        await waitFor(() => {
            expect(screen.getByText('Yes')).toBeDefined();
            expect(screen.getByText('No')).toBeDefined();
            expect(screen.getByText('None')).toBeDefined();
        });
    });

    it('renders selected value on click of Apply button', async () => {
        render(props);
        const expandButton = screen.getByTestId('SuiteListViewExpandButton');
        fireEvent.click(expandButton);
        const input = screen.getByTestId('SuiteListViewFilterInput');
        userEvent.type(input, 'N', { delay: 1 });

        const selectOption = screen.getByText('No');
        fireEvent.click(selectOption);

        const applyButton = screen.getByText('Apply');
        fireEvent.click(applyButton);

        await waitFor(() => {
            expect(screen.getByText('No')).toBeDefined();
            expect(screen.queryByText('None')).toBeNull();
            expect(screen.queryByText('Yes')).toBeNull();
        });
    });
});