import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { referencePaymentEntities } from 'src/__fixtures__/graphql/reference-payment-entity';
import * as referencePaymentEntityQuery from 'src/apollo/queries/reference-payment-entity';
import {
    PaymentEntitySelect,
    PaymentEntitySelectPropTypes,
} from 'src/components/shared/payment-entity-select';
import type { Identity } from '@theorchard/suite-frontend';
import { BRAND_KNR } from '@theorchard/constants';

const renderComponent = (
    props: PaymentEntitySelectPropTypes,
    identity?: Identity
) =>
    renderInAppContext(<PaymentEntitySelect {...props} />, {
        identity,
    });

describe('<PaymentEntitySelect> layout', () => {
    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            referencePaymentEntityQuery,
            'useReferencePaymentEntities'
        ).mockReturnValue({
            data: referencePaymentEntities,
            loading: false,
            error: undefined,
        });
    });

    const props: PaymentEntitySelectPropTypes = {
        id: 'paymentEntity',
        name: 'paymentEntity',
        onChange: jest.fn(),
        placeholder: 'Please Select',
        value: '',
    };

    it('renders expected markup', () => {
        const { container } = renderComponent(props);
        expect(container).toBeDefined();
        expect(screen.getByText('Please Select')).toBeDefined();
    });

    it('selects payment entity type', () => {
        renderComponent(props);

        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        fireEvent.click(screen.getByText('AWAL-UK'));
        expect(props.onChange).toHaveBeenCalledWith(
            { label: 'AWAL-UK', value: '1' },
            {
                action: 'select-option',
                name: 'paymentEntity',
                option: undefined,
            }
        );
        expect(screen.getByText('AWAL-UK')).toBeDefined();
    });

    it('should NOT disable KNR entity', () => {
        renderComponent(props);

        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });

        const knrOptions = screen.getAllByText(BRAND_KNR, { exact: false });

        knrOptions.forEach(option => {
            expect(option.parentElement?.classList).not.toContain(
                'Select__option--is-disabled'
            );
        });
    });
});