import React from 'react';
import { screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as runControllers from 'src/__fixtures__/graphql/contract-run-controller-list-response.json';
import { mockUseRunControllerList } from 'src/__fixtures__/graphql/run-controller-list-hooks';
import * as runControllerQuery from 'src/apollo/queries/run-controller';
import {
    RunControllerDropdown,
    RunControllerDropdownPropTypes,
} from 'src/components/contract-lifecycle-shared/run-controller-dropdown';
import type { GetRunControllersQuery } from 'src/apollo/queries/__generated__/run-controller';

describe('<RunControllerDropdown> layout', () => {
    const defaultProps: any = {
        accountId: '405',
        contractType: 'distribution',
        onChange: jest.fn(),
        disabled: false,
        value: '',
    };

    const renderComponent = (
        props: RunControllerDropdownPropTypes = defaultProps
    ) => renderInAppContext(<RunControllerDropdown {...props} />);

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        mockUseRunControllerList();
    });

    it('renders with specified placeholder', () => {
        renderComponent();
        expect(screen.getByText('Choose...')).toBeDefined();
    });

    it('renders selected run controller', async () => {
        const props = { ...defaultProps, value: '2722' };

        renderComponent(props);
        const selectedRunController =
            await screen.findByText('Test Priority One');

        expect(selectedRunController).toBeDefined();
    });

    it('when there are more than 100 run controllers', async () => {
        const mockRunControllers = { ...runControllers };
        mockRunControllers.abacusRunControllers.totalCount = 140;
        const queryMock = jest.spyOn(
            runControllerQuery,
            'useRunControllerList'
        );
        queryMock.mockReturnValue({
            data: mockRunControllers as GetRunControllersQuery,
            loading: false,
        });

        renderComponent();
        await waitFor(() => {
            expect(queryMock).toHaveBeenCalledTimes(2);
            expect(queryMock).toHaveBeenNthCalledWith(1, {
                limit: 100,
                offset: 0,
                contractType: defaultProps.contractType,
                accountId: defaultProps.accountId,
            });
            expect(queryMock).toHaveBeenNthCalledWith(2, {
                limit: 140,
                offset: 0,
                contractType: defaultProps.contractType,
                accountId: defaultProps.accountId,
            });
        });
    });

    it('renders disabled when specified', () => {
        renderComponent({ ...defaultProps, isDisabled: true });

        const runControllerSelect = screen.getByTestId('SuiteSelectInput');
        expect(runControllerSelect.className).toContain('disabled');
    });

    it('renders close/clear glyph when specified', () => {
        renderComponent({
            ...defaultProps,
            isClearable: true,
            value: '2722',
        });

        expect(screen.getByText('Test Priority One')).toBeDefined();
        const closeIcon = screen.getByTestId('ClearGlyphIcon');
        expect(closeIcon).toBeDefined();
    });
});