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.appendChild(document.createTextNode('Widget'));
  return element;
});

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

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

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

describe('OptaFootballStatsPageView', () => {
  it('should render correctly', async () => {
    const { asFragment } = render(
      <OptaFootballStatsPageView
        season="2025"
        competition="8"
        full_width
        heightSm={400}
        heightMd={500}
        heightLg={600}
      />
    );

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

    expect(mockInitSettings).toHaveBeenCalledTimes(1);
    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
    expect(mockInitComponent).toHaveBeenCalledTimes(1);
    expect(mockInitElement).toHaveBeenCalledWith(
      'opta-widget',
      expect.objectContaining({
        sport: 'football',
        widget: 'player_ranking',
        season: '2025',
        competition: '8'
      })
    );

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

  it('should render with isApp prop', async () => {
    const { asFragment } = render(
      <OptaFootballStatsPageView
        season="2025"
        competition="8"
        isApp
        heightSm={400}
      />
    );

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

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

  it('should show placeholder before widget loads', () => {
    const { getByText } = render(
      <OptaFootballStatsPageView season="2025" competition="8" heightSm={400} />
    );

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

  it('should hide placeholder after widget loads', async () => {
    const { queryByText } = render(
      <OptaFootballStatsPageView season="2025" competition="8" heightSm={400} />
    );

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

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

  it('should render with default isApp as false', async () => {
    const { container } = render(
      <OptaFootballStatsPageView season="2025" competition="8" />
    );

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

    expect(container).toBeTruthy();
    expect(mockInitSettings).toHaveBeenCalled();
    expect(mockInitStyleSheet).toHaveBeenCalledWith('football');
  });

  it('should pass correct widget configuration to initElement', async () => {
    render(<OptaFootballStatsPageView season="2024" competition="5" />);

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

    expect(mockInitElement).toHaveBeenCalledWith(
      'opta-widget',
      expect.objectContaining({
        sport: 'football',
        widget: 'player_ranking',
        season: '2024',
        competition: '5',
        template: 'normal',
        live: true,
        show_images: true,
        navigation: 'tabs_more',
        show_crests: true,
        show_ranks: true,
        show_appearances: false,
        visible_categories:
          'goals,assists,chances,clean_sheets,cards_yellow,cards_red',
        limit: '100',
        hide_zeroes: true,
        show_team_names: true,
        team_naming: 'full',
        player_naming: 'full',
        show_logo: true,
        show_title: true,
        date_format: 'DD/MM/YYYY',
        breakpoints: 1
      })
    );
  });
});