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 = 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 { OptaFootballPlayerRanking } from '../OptaFootballPlayerRanking';

const requiredProps = {
  season: '2025',
  competition: '8',
  visible_categories:
    'goals,assists,chances,clean_sheets,cards_yellow,cards_red'
};

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

  it('should render correctly', async () => {
    let asFragment: () => DocumentFragment;
    await act(async () => {
      const result = render(<OptaFootballPlayerRanking {...requiredProps} />);
      asFragment = result.asFragment;
    });

    expect(mockInitSettings).toHaveBeenCalled();
    expect(mockInitStyleSheet).toHaveBeenCalled();
    expect(mockInitComponent).toHaveBeenCalled();

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

  it('should pass widget as player_ranking', async () => {
    await act(async () => {
      render(<OptaFootballPlayerRanking {...requiredProps} />);
    });

    expect(mockInitElement).toHaveBeenCalledWith(
      'opta-widget',
      expect.objectContaining({
        widget: 'player_ranking',
        navigation: 'tabs_more',
        show_ranks: true,
        limit: 5,
        team_naming: 'full',
        player_naming: 'full'
      })
    );
  });

  it('should pass team prop when provided', async () => {
    await act(async () => {
      render(<OptaFootballPlayerRanking {...requiredProps} team="174" />);
    });

    expect(mockInitElement).toHaveBeenCalledWith(
      'opta-widget',
      expect.objectContaining({
        team: '174'
      })
    );
  });
});