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';
  const wrapper = document.createElement('div');
  wrapper.className = 'Opta_W';
  element.appendChild(wrapper);
  return element;
};

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

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

const requiredProps = {
  season: '2025',
  competition: '8',
  match: '2562232'
};

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

  it('should render correctly', async () => {
    const { asFragment } = render(
      <OptaMatchStatsTimeline {...requiredProps} />
    );

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

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

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render with isApp prop set to true', async () => {
    const { asFragment } = render(
      <OptaMatchStatsTimeline {...requiredProps} isApp={true} />
    );

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

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render with hasBorder prop set to true', async () => {
    const { asFragment } = render(
      <OptaMatchStatsTimeline {...requiredProps} hasBorder={true} />
    );

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

    expect(asFragment()).toMatchSnapshot();
  });

  it('should initialize football stylesheet', () => {
    render(<OptaMatchStatsTimeline {...requiredProps} />);

    expect(mockInitStyleSheet).toHaveBeenCalledWith('football');
  });

  it('shows the placeholder until the widget is ready', async () => {
    const { queryByTestId } = render(
      <OptaMatchStatsTimeline {...requiredProps} />
    );

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

    await act(async () => {
      await Promise.resolve();
    });

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

  it('renders the Timeline heading', () => {
    const { getByText } = render(<OptaMatchStatsTimeline {...requiredProps} />);

    expect(getByText('Timeline')).toBeInTheDocument();
  });
});