import React from 'react';
import { act, render } 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 = jest.fn(() => {
  const element = document.createElement('div');
  element.innerHTML = `
    <div class="Opta-Nav">
      <ul>
        <li><button>Round 1</button></li>
        <li><button>Round of 32</button></li>
        <li><button>Round of 16</button></li>
        <li><button>Quarter Finals</button></li>
        <li><button>Semi Finals</button></li>
        <li><button>3rd & 4th Place</button></li>
      </ul>
    </div>
  `;
  return element;
});

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

jest.mock('../../../utils/useAddFixtureNavigation', () => ({
  useAddFixtureNavigation: jest.fn()
}));

beforeAll(() => {
  window.HTMLElement.prototype.scrollIntoView = jest.fn();
});

class MockMutationObserver {
  public disconnect = jest.fn();
  private callback: MutationCallback;

  constructor(callback: MutationCallback) {
    this.callback = callback;
  }

  public observe(): void {
    this.callback([], this as any);
  }
}
global.MutationObserver = MockMutationObserver as any;

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

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

describe('OptaFootballFixturesPageView', () => {
  it('should render correctly', async () => {
    jest.useFakeTimers();
    const onWidgetReady = jest.fn();
    const { asFragment } = render(
      <OptaFootballFixturesPageView
        season="2023"
        competition="3"
        onWidgetReady={onWidgetReady}
        full_width
        heightSm={800}
        heightMd={1200}
        heightLg={1600}
        activeTabPosition={6}
      />
    );

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

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

    expect(mockInitSettings).toHaveBeenCalledTimes(1);
    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
    expect(mockInitComponent).toHaveBeenCalledTimes(1);
    expect(mockInitElement).toHaveBeenCalledWith(
      'opta-widget',
      expect.objectContaining({
        sport: 'football',
        widget: 'fixtures',
        season: '2023',
        competition: '3'
      })
    );
    expect(onWidgetReady).toHaveBeenCalledTimes(1);

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

  it('should show placeholder before widget loads', () => {
    const { getByText } = render(
      <OptaFootballFixturesPageView
        season="2023"
        competition="3"
        heightSm={800}
      />
    );

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

  it('should hide placeholder after widget loads', async () => {
    const { queryByText } = render(
      <OptaFootballFixturesPageView
        season="2023"
        competition="3"
        heightSm={800}
      />
    );

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

    expect(queryByText('Placeholder')).not.toBeInTheDocument();
  });
});