import React, { useState, useEffect } from 'react';
import { Placeholder } from '@times-components/image';
import {
  initSettings,
  initStyleSheet,
  initScript,
  initElement,
  initComponent
} from '../../../utils/config';
import { PlaceholderContainer } from '../../../shared/shared-styles';
import { WidgetContainer } from './WidgetContainer';
import { WidgetWrapper } from '../shared/styles';

export const OptaMatchStatsGraphs: React.FC<{
  season: string;
  competition: string;
  match: string;
  title?: string;
  isApp?: boolean;
}> = React.memo(({ season, competition, match, title, isApp = false }) => {
  const ref = React.createRef<HTMLDivElement>();
  const [isReady, setIsReady] = useState<boolean>(false);

  useEffect(() => {
    const sport = 'football';

    initSettings();
    initStyleSheet(sport);
    initScript()
      .then(() => {
        if (ref.current) {
          ref.current.innerHTML = initElement('opta-widget', {
            sport,
            widget: 'matchstats',
            season,
            competition,
            match,
            template: 'team_graphs',
            live: true,
            navigation: 'tabs',
            default_nav: '3',
            show_match_header: false,
            show_score: false,
            show_halftime_score: false,
            show_crests: false,
            show_team_formation: false,
            show_competition_name: false,
            graph_style: 'full',
            show_date: false,
            date_format: 'dddd D MMMM YYYY',
            narrow_date_format: 'DD/MM/YY',
            show_social: false,
            show_var: false,
            rounding: '1',
            competition_naming: 'full',
            team_naming: 'full',
            show_live: false,
            show_logo: false,
            show_title: false,
            breakpoints: '400, 700'
          }).outerHTML;

          initComponent();
        }
      })
      .then(() => {
        setIsReady(true);
      });
  }, []);

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