import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as statementPeriods from 'src/__fixtures__/graphql/statement-periods-list-response.json';
import * as statementPeriodQuery from 'src/apollo/queries/statement-periods';
import StatementPeriodMultiSelect, {
    StatementPeriodMultiSelectPropTypes,
} from 'src/components/shared/statement-period-multiselect';

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

    const props: StatementPeriodMultiSelectPropTypes = {
        compact: true,
        isDisabled: false,
        onChange: jest.fn(),
        value: [],
    };

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            statementPeriodQuery,
            'useStatementPeriodsList'
        ).mockReturnValue({
            data: statementPeriods,
            loading: false,
            error: undefined,
        });
    });

    it('renders Statement Period search filter', () => {
        render(props);

        expect(screen.getByText('Statement Period')).toBeDefined();
        expect(screen.getByRole('combobox', { hidden: true })).toBeDefined();
    });

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

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

        await waitFor(() => {
            statementPeriods?.abacusStatementPeriodsList?.items?.forEach(
                ({ statementPeriodName }) => {
                    expect(statementPeriodName).toBeDefined();
                }
            );
        });
    });

    it('renders selected value', () => {
        render({ ...props, value: ['254', '253'] });

        expect(screen.getByText('February 2020')).toBeDefined();
        expect(screen.getByText('+1')).toBeDefined();
    });
});