import { RefObject, useEffect } from 'react';

export const useUpdateTimestamps = (ref: RefObject<HTMLDivElement>) => {
  useEffect(
    () => {
      updateTimestamps(ref);
    },
    [ref]
  );
};

// Moves the venue info from match data to match header
const updateTimestamps = (element: RefObject<HTMLDivElement>) => {
  let count = 0;
  const updateTimestampsInterval = setInterval(() => {
    // we're no longer able to use pub/sub method, due to limitations with Opta implementation, so loop with a max count of 25
    if (count >= 25) {
      clearInterval(updateTimestampsInterval);
    }
    count++;

    if (!element.current) {
      return;
    }
    const timestampElements = element.current.querySelectorAll('.Opta-Time');
    if (timestampElements && timestampElements.length > 0) {
      timestampElements.forEach(timestampElement => {
        if (
          timestampElement &&
          timestampElement.innerHTML &&
          timestampElement.innerHTML.includes('nbsp;')
        ) {
          timestampElement.classList.add('Opta-Time--empty');
        }
      });
      clearInterval(updateTimestampsInterval);
    }
  }, 500);
};