import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import RunControllerMultiSelect, {
    RunControllerSelectPropTypes,
} from 'src/components/shared/run-controller-multi-select';

jest.mock('src/apollo/queries/run-controller', () => ({
    useRunControllerList: jest.fn(),
}));
const { useRunControllerList } = jest.requireMock(
    'src/apollo/queries/run-controller'
) as { useRunControllerList: jest.Mock };

const mockData = {
    abacusRunControllers: {
        items: [
            { runControllerId: 1, runControllerName: 'Orchard' },
            { runControllerId: 2, runControllerName: 'AWAL' },
            { runControllerId: 30, runControllerName: 'KNR' },
        ],
    },
};

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

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

    beforeEach(() => {
        jest.clearAllMocks();
        useRunControllerList.mockReturnValue({
            data: mockData,
            loading: false,
        });
    });

    it('renders "Run Controller" filter', () => {
        render(baseProps);

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

    it('renders run controller options in dropdown', async () => {
        render(baseProps);

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

        expect(screen.getByText('Orchard')).toBeDefined();
        expect(screen.getByText('AWAL')).toBeDefined();
        expect(screen.getByText('KNR')).toBeDefined();
    });

    it('renders apply button in dropdown', () => {
        render(baseProps);

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

        expect(screen.getByText('Apply')).toBeDefined();
    });

    it('renders selected value summary when multiple values provided', () => {
        render({
            ...baseProps,
            value: ['2', '30'], // should display first selected label + "+1"
        });

        // MultiSelect usually shows the first selected label and a +N counter.
        expect(screen.getByText('AWAL')).toBeDefined();
        expect(screen.getByText('+1')).toBeDefined();
    });
});