import React, { useEffect, useRef, useState } from 'react';

import { Placeholder } from '@times-components/image';

import {
  initSettings,
  initStyleSheet,
  initScript,
  initElement,
  initComponent
} from '../../../utils/config';

import { PlaceholderContainer } from '../../../shared/shared-styles';
import { LoadingWrapper, WidgetContainer } from './WidgetContainer';
import { useMoveVenue } from './useMoveVenue';

const SUMMARY_READY_SELECTOR = '.Opta-MatchHeader';

export const OptaMatchStatsSummary: React.FC<{
  season: string;
  competition: string;
  match: string;
  isApp?: boolean;
}> = React.memo(({ season, competition, match, isApp = false }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [isReady, setIsReady] = useState<boolean>(false);
  useMoveVenue(ref);
  useEffect(() => {
    const sport = 'football';
    let observer: MutationObserver | undefined;

    const disconnectObserver = () => {
      if (observer) {
        observer.disconnect();
      }
      observer = undefined;
    };

    const updateReadyState = () => {
      if (!ref.current) {
        return false;
      }

      const hasRenderedSummary = Boolean(
        ref.current.querySelector(SUMMARY_READY_SELECTOR)
      );

      if (hasRenderedSummary) {
        setIsReady(true);
        disconnectObserver();
      }

      return hasRenderedSummary;
    };

    initSettings();
    initStyleSheet(sport);
    initScript().then(() => {
      if (ref.current) {
        ref.current.innerHTML = initElement('opta-widget', {
          sport,
          widget: 'match_summary',
          season,
          competition,
          match,
          template: 'normal',
          live: true,
          show_match_header: true,
          show_score: true,
          show_attendance: false,
          show_date: true,
          date_format: 'lll',
          narrow_date_format: 'llll',
          show_cards: 'red',
          show_crests: true,
          show_team_formation: false,
          show_goals: true,
          show_goals_combined: false,
          show_penalties_missed: true,
          show_halftime_score: true,
          show_referee: false,
          show_subs: false,
          show_venue: true,
          show_shootouts: true,
          show_tooltips: false,
          show_images: false,
          show_competition_name: true,
          competition_naming: 'full',
          team_naming: window.innerWidth < 768 ? 'brief' : 'full',
          player_naming: 'last_name',
          show_live: true,
          show_logo: false,
          show_title: false
        }).outerHTML;

        initComponent();

        if (!updateReadyState() && typeof MutationObserver !== 'undefined') {
          observer = new MutationObserver(() => {
            updateReadyState();
          });

          observer.observe(ref.current, {
            childList: true,
            subtree: true
          });
        }
      }
    });

    return () => {
      disconnectObserver();
    };
  }, []);

  return (
    <LoadingWrapper>
      <WidgetContainer ref={ref} isApp={isApp} />
      {!isReady && (
        <PlaceholderContainer data-testid="placeholder">
          <Placeholder />
        </PlaceholderContainer>
      )}
    </LoadingWrapper>
  );
});