import { RefObject, useEffect } from 'react';

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

// Moves the venue info from match data to match header
const moveVenue = (element: RefObject<HTMLDivElement>) => {
  let count = 0;
  const moveVenueInterval = 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(moveVenueInterval);
    }
    count++;

    if (!element.current) {
      return;
    }
    const venueElement = element.current.querySelector('.Opta-Matchdata');
    const matchHeaderDetails = element.current.querySelector(
      '.Opta-MatchHeader-Details div'
    );
    if (venueElement && matchHeaderDetails) {
      const venue = venueElement.querySelector('dd');
      if (venue) {
        const venueText = venue.textContent;
        const venueSpan = document.createElement('span');
        venueSpan.classList.add('Opta-MatchHeader-Venue');
        venueSpan.textContent = 'VENUE: ';
        const venueLabel = document.createElement('span');
        venueLabel.classList.add('Opta-MatchHeader-VenueLabel');
        venueLabel.textContent = venueText || '';
        venueSpan.appendChild(venueLabel);
        matchHeaderDetails.appendChild(venueSpan);
        reformatHT(element);
        addPreMatchDashes(element);
        clearInterval(moveVenueInterval);
      }
    }
  }, 500);
};

// Reformats the halftime score from "HT 1-0" to "1 HT 0"
const reformatHT = (element: RefObject<HTMLDivElement>) => {
  if (!element.current) {
    return;
  }

  const scoreExtras = element.current.querySelector('.Opta-Score-Extras td');
  if (!scoreExtras) {
    return;
  }

  const fullText = (scoreExtras.textContent || '').trim();
  const match = fullText.match(/([A-Za-z]+):?\s*(\d+)\s*-\s*(\d+)/);
  if (!match) {
    return;
  }

  const [, label, homeScore, awayScore] = match;
  scoreExtras.innerHTML = '';

  const wrapper = document.createElement('span');
  wrapper.classList.add('Opta-HT-Wrapper');

  const homeSpan = document.createElement('span');
  homeSpan.classList.add('Opta-HT-Score', 'Opta-Home');
  homeSpan.textContent = homeScore;

  const labelSpan = document.createElement('span');
  labelSpan.classList.add('Opta-HT-Label');
  labelSpan.textContent = label;

  const awaySpan = document.createElement('span');
  awaySpan.classList.add('Opta-HT-Score', 'Opta-Away');
  awaySpan.textContent = awayScore;

  wrapper.appendChild(homeSpan);
  wrapper.appendChild(labelSpan);
  wrapper.appendChild(awaySpan);
  scoreExtras.appendChild(wrapper);
};

const addPreMatchDashes = (element: RefObject<HTMLDivElement>) => {
  if (!element.current) {
    return;
  }

  const versus = element.current.querySelector('.Opta-Divider.Opta-Versus');
  if (!versus) {
    return;
  }

  const scoreSpans = element.current.querySelectorAll('.Opta-Team-Score');
  scoreSpans.forEach(span => {
    if (!span.textContent || !span.textContent.replace(/\s|\u00A0/g, '')) {
      span.textContent = '-';
    }
  });
};