import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    transactionTypes,
    transactionTypeGroups,
} from 'src/__fixtures__/graphql/transaction-types';
import {
    TransactionTypeMultiSelect,
    TransactionTypeMultiSelectPropTypes,
} from 'src/components/shared/transaction-type-multiselect';
import type { GetTransactionTypesQuery } from 'src/apollo/queries/transaction-types/__generated__/transaction-types';

type TransactionType = NonNullable<
    GetTransactionTypesQuery['transactionTypes']
>[0];

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

    const transactionTypesList = transactionTypes.transactionTypes.map(
        ({ txnTypeCode, txnTypeName, txnTypeId }: TransactionType) => ({
            label: txnTypeCode.concat(' - ', txnTypeName),
            value: txnTypeId,
        })
    );
    const transactionTypeGroupList =
        transactionTypeGroups.transactionTypeGroups.map(
            ({ transactionTypeGroupName, transactionTypes }) => ({
                transactionTypeGroupName,
                transactionTypeIds: transactionTypes.map(tt => tt.txnTypeId),
            })
        );

    const props = {
        className: 'transactionType',
        onChange: jest.fn(),
        placeholder: 'All',
        selectedValue: [],
        transactionTypes: transactionTypesList,
        transactionTypeGroups: transactionTypeGroupList,
    };

    afterEach(jest.restoreAllMocks);

    it('renders <TransactionTypeMultiSelect>', () => {
        render(props);
        expect(screen.getByText('All')).toBeDefined();
    });

    it('displays dropdown options', async () => {
        const { container } = render(props);
        fireEvent.click(screen.getByRole('combobox', { hidden: true }));
        await screen.findByTestId('SuiteListView');
        container.getElementsByClassName('SuiteListView-option');
        transactionTypeGroupList.map(group =>
            expect(
                screen.getByText(group.transactionTypeGroupName)
            ).toBeDefined()
        );
        expect(
            screen.getByText('AEA - Ad-Enabled Audio Streams')
        ).toBeDefined();
        expect(
            screen.getByText('AEV - Ad-Enabled Video Streams')
        ).toBeDefined();
    });

    it('shows selected transaction type option', () => {
        render({ ...props, selectedValue: ['4', '6', '7'] });
        expect(
            screen.getByText('AEV - Ad-Enabled Video Streams')
        ).toBeDefined();
    });

    it('shows "All" when all transaction type options are selected', () => {
        render({
            ...props,
            selectedValue: ['1', '2', '3', '4', '5', '6', '7', '8'],
        });
        expect(screen.getByText('All')).toBeDefined();
    });
});