import { render, screen } from '@testing-library/react';
import React from 'react';
import { useIsYouTubeFingerprintRulesEnabled } from 'shared/features';
import ServicesMultiSelect from 'src/components/servicesMultiSelect';

jest.mock('shared/features', () => ({
    useIsYouTubeFingerprintRulesEnabled: jest.fn(),
}));

describe('<ServicesMultiSelect>', () => {
    const onApplySpy = jest.fn();

    const defaultProps = {
        onApply: onApplySpy,
    };

    const renderWrapper = () =>
        render(<ServicesMultiSelect {...defaultProps} />);

    test('renders dropdown', async () => {
        renderWrapper();

        const t = await screen.findByText('TikTok');
        expect(t).toBeInTheDocument();
    });

    describe('when YouTube Fingerprint Rules feature is disabled', () => {
        test('disables YouTube option and selects TikTok by default', async () => {
            (useIsYouTubeFingerprintRulesEnabled as jest.Mock).mockReturnValue(
                false
            );
            renderWrapper();

            const serviceDropdown =
                await screen.findByTestId('services-dropdown');

            expect(
                serviceDropdown.querySelector(
                    '[data-testid="SuiteSelectInput"]'
                )
            ).toHaveClass('disabled');
            expect(
                serviceDropdown.querySelectorAll(
                    '[data-testid="SuiteBadgeText"]'
                ).length
            ).toBe(1);
            expect(
                serviceDropdown.querySelector('[data-testid="SuiteBadgeText"]')
            ).toHaveTextContent('TikTok');
        });
    });

    describe('when YouTube Fingerprint Rules feature is enabled', () => {
        beforeAll(() => {
            (useIsYouTubeFingerprintRulesEnabled as jest.Mock).mockReturnValue(
                true
            );
        });

        afterEach(() => {
            jest.clearAllMocks();
        });

        test('enables YouTube option and does not select any service by default', async () => {
            renderWrapper();

            const serviceDropdown =
                await screen.findByTestId('services-dropdown');

            expect(
                serviceDropdown.querySelector(
                    '[data-testid="SuiteSelectInput"]'
                )
            ).not.toHaveClass('disabled');
        });
    });
});