import * as React from 'react';
import { render, waitFor } from '@testing-library/react';

import { UsercentricsProvider } from './contexts/UsercentricsContext';
import { Container } from './Container';

jest.mock('./contexts/UsercentricsContext/loadUsercentrics');

jest.mock('./components/InitialBanner/InitialBanner', () => ({
  InitialBanner: () => <></>,
}));

jest.mock('./components/InitialDialog/InitialDialog', () => ({
  InitialDialog: () => <></>,
}));

jest.mock('./components/SettingsModal/SettingsModal', () => ({
  SettingsModal: () => <></>,
}));

jest.mock('./components/DetailsModal/DetailsModal', () => ({
  DetailsModal: () => <></>,
}));

describe('<Container />', () => {
  it('handles consent update event', async () => {
    const mockFn = jest.fn();
    const consentEventName = 'ucConsent';
    render(
      <UsercentricsProvider loadingUI={() => <></>} settingsId="XXXX" consentEventName={consentEventName}>
        <Container onConsentStatusUpdate={mockFn} />
      </UsercentricsProvider>
    );

    await waitFor(() => {
      expect(mockFn).toHaveBeenCalledTimes(0);
    });

    const event = new Event(consentEventName);

    (event as any).detail = {
      event: 'consent_status',
    };

    window.dispatchEvent(event);

    await waitFor(() => {
      expect(mockFn).toHaveBeenCalledTimes(1);
    });
  });
});