import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { AbacusContractStatus } from 'src/apollo/definitions/globalTypes';
import { CONTRACT_STATUS } from 'src/apollo/type-constants/contract';
import ContractStatusMultiSelect, {
    ContractStatusMultiSelectPropTypes,
} from 'src/components/shared/contract-status-multi-select';

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

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

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

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

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

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

        Array.from(CONTRACT_STATUS.entries()).forEach(([, value]) => {
            expect(value.label).toBeDefined();
        });
    });

    it('renders selected value', () => {
        render({
            ...props,
            value: [
                AbacusContractStatus.IN_COLLECTION_PERIOD,
                AbacusContractStatus.TO_BE_TERMINATED,
                AbacusContractStatus.INIT,
            ],
        });

        expect(screen.getByText('Collection Period')).toBeDefined();
        expect(screen.getByText('+2')).toBeDefined();
    });
});