import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    PaymentScheduleMultiSelect,
    PaymentScheduleMultiSelectPropTypes,
} from 'src/components/shared/payment-schedule-multiselect';
import { PAYMENT_SCHEDULES } from 'src/constants';

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

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

    afterEach(jest.restoreAllMocks);

    it('renders <PaymentScheduleMultiSelect>', () => {
        render(props);
        expect(screen.getByText('Select Payment Schedule(s)')).toBeDefined();
    });

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

        PAYMENT_SCHEDULES.forEach(({ label }) =>
            expect(screen.getByText(label)).toBeDefined()
        );

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

    it('shows selected payment schedule option', () => {
        render({
            ...props,
            value: ['30_days_after_month_end', '60_days_after_half_year_end'],
        });
        expect(screen.getByText('30 days after month end')).toBeDefined();
        expect(screen.getByText('60 days after half-year end')).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();
        });
    });
});