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

import 'regenerator-runtime';
import '@testing-library/jest-dom';

jest.mock('@times-components/image', () => ({
  Placeholder: () => <>Placeholder</>
}));

jest.mock('../../../../utils/config', () => ({
  initSettings: jest.fn(),
  initStyleSheet: jest.fn(),
  initScript: jest.fn(() => Promise.resolve({})),
  initElement: jest.fn(() => ({ outerHTML: '<div class="Opta"></div>' })),
  initComponent: jest.fn()
}));

import {
  initSettings,
  initStyleSheet,
  initComponent
} from '../../../../utils/config';

import { OptaMatchStatsSummary } from '../OptaMatchStatsSummary';

const mockInitSettings = initSettings as jest.Mock;
const mockInitStyleSheet = initStyleSheet as jest.Mock;
const mockInitComponent = initComponent as jest.Mock;

let mockMutationObserverCallback: MutationCallback | undefined;
const mockObserve = jest.fn();
const mockDisconnect = jest.fn();
const originalMutationObserver = global.MutationObserver;

class MockMutationObserver {
  observe = mockObserve;

  disconnect = mockDisconnect;
  constructor(callback: MutationCallback) {
    mockMutationObserverCallback = callback;
  }
}

const requiredProps = {
  season: '2020',
  competition: '3',
  match: '2041900'
};

describe('OptaMatchStatsSummary', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    mockMutationObserverCallback = undefined;
    global.MutationObserver = (MockMutationObserver as unknown) as typeof MutationObserver;
  });

  afterAll(() => {
    global.MutationObserver = originalMutationObserver;
  });

  it('initialises the widget config once', async () => {
    render(<OptaMatchStatsSummary {...requiredProps} />);

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

    expect(mockInitSettings).toHaveBeenCalledTimes(1);
    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
  });

  it('keeps the placeholder visible until the match header is rendered', async () => {
    const { container, queryByTestId } = render(
      <OptaMatchStatsSummary {...requiredProps} />
    );

    await waitFor(() => {
      expect(container.querySelector('.Opta')).toBeInTheDocument();
    });

    expect(queryByTestId('placeholder')).toBeInTheDocument();

    act(() => {
      const widgetRoot = container.querySelector('.Opta');
      const header = document.createElement('table');
      header.className = 'Opta-MatchHeader';
      if (widgetRoot) {
        widgetRoot.appendChild(header);
      }
      if (mockMutationObserverCallback) {
        const fakeObserver: MutationObserver = (new MockMutationObserver(
          mockMutationObserverCallback
        ) as unknown) as MutationObserver;
        mockMutationObserverCallback([], fakeObserver);
      }
    });

    await waitFor(() => {
      expect(queryByTestId('placeholder')).not.toBeInTheDocument();
    });
  });
});