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

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

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

const mockInitSettings = jest.fn();
const mockInitStyleSheet = jest.fn();
const mockInitComponent = jest.fn();

const mockInitElement = () => {
  const element = document.createElement('div');
  element.className = 'Opta-Root';
  // Create structure with timestamps to exercise useUpdateTimestamps
  const list = document.createElement('ul');
  list.className = 'Opta-Striped';
  const li = document.createElement('li');
  const time1 = document.createElement('span');
  time1.className = 'Opta-Time';
  time1.innerHTML = '&nbsp;';
  const time2 = document.createElement('span');
  time2.className = 'Opta-Time';
  time2.textContent = "45'";
  li.appendChild(time1);
  li.appendChild(time2);
  list.appendChild(li);
  element.appendChild(list);
  return element;
};

jest.mock('../../../../utils/config', () => ({
  initSettings: mockInitSettings,
  initStyleSheet: mockInitStyleSheet,
  initScript: () => new Promise(resolve => resolve({})),
  initElement: mockInitElement,
  initComponent: mockInitComponent
}));

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

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

describe('OptaMatchStatsCommentary', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders and initialises widget', async () => {
    const { asFragment, queryByTestId } = render(
      <OptaMatchStatsCommentary {...requiredProps} isApp />
    );

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

    // allow promises in useEffect chain to resolve
    await act(async () => {
      await Promise.resolve();
    });

    expect(mockInitSettings).toHaveBeenCalledTimes(1);
    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
    expect(mockInitComponent).toHaveBeenCalledTimes(1);
    expect(asFragment()).toMatchSnapshot();
  });

  it('marks empty timestamps via useUpdateTimestamps', async () => {
    jest.useFakeTimers();
    const { container } = render(
      <OptaMatchStatsCommentary {...requiredProps} />
    );

    await act(async () => {
      mockInitComponent();
    });

    act(() => {
      jest.advanceTimersByTime(500);
    });

    const emptyTimes = container.querySelectorAll(
      '.Opta-Time.Opta-Time--empty'
    );
    expect(emptyTimes.length).toBeGreaterThan(0);
    jest.useRealTimers();
  });
});