import React from 'react';
import { render, act, fireEvent, waitFor } 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 mockInitScript = jest.fn();
const mockEmitEvent = 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: mockInitScript,
  initElement: mockInitElement,
  initComponent: mockInitComponent
}));

jest.mock('../../../utils/emitEvent', () => ({
  emitEvent: mockEmitEvent
}));

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

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

describe('OptaFootballSummary', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    mockInitScript.mockResolvedValue({});
  });

  afterEach(() => {
    jest.clearAllMocks();
    document.body.innerHTML = '';
  });

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

    await waitFor(() => {
      expect(mockInitSettings).toHaveBeenCalledTimes(1);
    });

    expect(mockInitStyleSheet).toHaveBeenCalledWith('football');
    expect(mockInitComponent).toHaveBeenCalledTimes(1);
    expect(getByRole('button')).toBeInTheDocument();

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

  it('should enable the button initially', () => {
    const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
    const button = getByRole('button');
    expect(button).not.toBeDisabled();
  });

  it('should toggle details when button is clicked', async () => {
    const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
    const button = getByRole('button');

    expect(button).toHaveTextContent('Show Details');

    act(() => {
      fireEvent.click(button);
    });

    await waitFor(() => {
      expect(button).toHaveTextContent('Hide Details');
    });

    act(() => {
      fireEvent.click(button);
    });

    await waitFor(() => {
      expect(button).toHaveTextContent('Show Details');
    });
  });

  describe('emitEvent', () => {
    it('should call emitEvent with updateHeight when details are toggled', async () => {
      const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
      const button = getByRole('button');

      // Clear initial calls
      jest.clearAllMocks();

      act(() => {
        fireEvent.click(button);
      });

      await waitFor(() => {
        expect(mockEmitEvent).toHaveBeenCalledWith(
          'updateHeight',
          expect.any(Number)
        );
      });
    });

    it('should emit updateHeight event on each toggle', async () => {
      const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
      const button = getByRole('button');

      // Clear initial calls
      jest.clearAllMocks();

      // First toggle
      act(() => {
        fireEvent.click(button);
      });

      await waitFor(() => {
        expect(mockEmitEvent).toHaveBeenCalledTimes(1);
      });

      // Second toggle
      act(() => {
        fireEvent.click(button);
      });

      await waitFor(() => {
        expect(mockEmitEvent).toHaveBeenCalledTimes(2);
      });

      // Third toggle
      act(() => {
        fireEvent.click(button);
      });

      await waitFor(() => {
        expect(mockEmitEvent).toHaveBeenCalledTimes(3);
      });
    });

    it('should emit updateHeight with container offsetHeight', async () => {
      const { getByRole, container } = render(
        <OptaFootballSummary {...requiredProps} />
      );
      const button = getByRole('button');

      // Clear initial calls
      jest.clearAllMocks();

      // Mock offsetHeight
      const containerElement = container.querySelector('[class*="Container"]');
      if (containerElement) {
        Object.defineProperty(containerElement, 'offsetHeight', {
          value: 250,
          configurable: true
        });
      }

      act(() => {
        fireEvent.click(button);
      });

      await waitFor(() => {
        expect(mockEmitEvent).toHaveBeenCalledWith(
          'updateHeight',
          expect.any(Number)
        );
      });
    });
  });
});