import React, { ReactNode, useRef } from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import { useUpdateTimestamps } from '../useUpdateTimestamps';

describe('useUpdateTimestamps', () => {
  const Component: React.FC<{ children?: ReactNode }> = ({ children }) => {
    const ref = useRef<HTMLDivElement>(null);
    useUpdateTimestamps(ref);
    return <div ref={ref}>{children}</div>;
  };

  let container: HTMLDivElement;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    ReactDOM.unmountComponentAtNode(container);
    container.remove();
  });

  it('adds Opta-Time--empty class to timestamps containing nbsp and clears interval to avoid duplicates', () => {
    jest.useFakeTimers();

    const withoutTimestamps = (
      <div className="Opta-Commentary-Wrapper">
        <div />
      </div>
    );

    act(() => {
      ReactDOM.render(<Component>{withoutTimestamps}</Component>, container);
    });
    act(() => {
      jest.advanceTimersByTime(1000);
    });

    const withTimestamps = (
      <div className="Opta-Commentary-Wrapper">
        <div className="Opta-Commentary-Item">
          <span className="Opta-Time">&nbsp;</span>
        </div>
        <div className="Opta-Commentary-Item">
          <span className="Opta-Time">45'</span>
        </div>
        <div className="Opta-Commentary-Item">
          <span className="Opta-Time">&nbsp;</span>
        </div>
      </div>
    );

    act(() => {
      ReactDOM.render(<Component>{withTimestamps}</Component>, container);
    });

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

    const emptyTimes = container.querySelectorAll(
      '.Opta-Time.Opta-Time--empty'
    );
    expect(emptyTimes.length).toBe(2);
    expect(container.querySelectorAll('.Opta-Time').length).toBe(3);

    act(() => {
      jest.advanceTimersByTime(500 * 10);
    });
    const emptyTimesAfter = container.querySelectorAll(
      '.Opta-Time.Opta-Time--empty'
    );
    expect(emptyTimesAfter.length).toBe(2);

    jest.useRealTimers();
  });

  it('clears interval after 25 attempts when timestamps are not found', () => {
    jest.useFakeTimers();
    const clearSpy = jest.spyOn(global, 'clearInterval');

    const withoutTimestamps = (
      <div className="Opta-Commentary-Wrapper">
        <div />
      </div>
    );

    act(() => {
      ReactDOM.render(<Component>{withoutTimestamps}</Component>, container);
    });

    act(() => {
      jest.advanceTimersByTime(25 * 500);
    });
    expect(clearSpy).not.toHaveBeenCalled();

    act(() => {
      jest.advanceTimersByTime(500);
    });
    expect(clearSpy).toHaveBeenCalledTimes(1);

    const emptyTimes = container.querySelectorAll(
      '.Opta-Time.Opta-Time--empty'
    );
    expect(emptyTimes.length).toBe(0);

    clearSpy.mockRestore();
    jest.useRealTimers();
  });
});