import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as adjustmentQuery from 'src/apollo/queries/adjustment';
import AdjustmentsContractsSelect, {
    AdjustmentsContractsSelectPropTypes,
} from 'src/components/adjustments/adjustments-contracts-select';
import { worksheetAdjustmentsContracts } from 'src/__fixtures__/graphql/worksheet-adjustments-contracts';

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

    const props: AdjustmentsContractsSelectPropTypes = {
        compact: true,
        isFilterCleared: false,
        isDisabled: false,
        onChange: jest.fn(),
        truncatedTextMaxWidth: 100,
    };

    beforeEach(() => {
        jest.spyOn(
            adjustmentQuery,
            'useWorksheetAdjustmentsContractsSearch'
        ).mockReturnValue(
            async () => await Promise.resolve(worksheetAdjustmentsContracts)
        );
    });

    it('renders Contract filter', () => {
        render(props);

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

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

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

        const input = screen.getByTestId('SuiteListViewFilterInput');
        fireEvent.change(input, { target: { value: 'Contract' } });

        await waitFor(() => {
            expect(screen.getByText('Globalnet Contract 64 - 1')).toBeDefined();
            expect(
                screen.getByText('Tapete Records Contract 109 - 2')
            ).toBeDefined();
        });
    });

    it('renders selected value on click of Apply button', async () => {
        render(props);
        const expandButton = await screen.findByTestId(
            'SuiteListViewExpandButton'
        );
        fireEvent.click(expandButton);
        const input = screen.getByTestId('SuiteListViewFilterInput');
        fireEvent.change(input, { target: { value: 'Tapete' } });

        const selectOption = await screen.findByText(
            'Tapete Records Contract 109 - 2'
        );
        fireEvent.click(selectOption);

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

        expect(
            screen.getByText('Tapete Records Contract 109 - 2')
        ).toBeDefined();
        expect(screen.queryByText('Globalnet Contract 64 - 1')).toBeNull();
    });
});