import React, { useState, useEffect } from 'react';
import { Placeholder } from '@times-components/image';
import {
  initSettings,
  initStyleSheet,
  initScript,
  initElement,
  initComponent
} from '../../utils/config';
import {
  WidgetContainer,
  DesktopLoadingWrapper,
  DesktopPlaceholderContainer
} from '../opta-match-stats/matchday-live/styles/WidgetContainer';
import { TeamColor } from '../opta-match-stats/shared/types';
import { StartingFormationsWrapper } from './styles';

export const OptaFootballStartingFormations: React.FC<{
  season: string;
  competition: string;
  match: string;
  isApp?: boolean;
  title?: string;
  homeTeamColor?: TeamColor;
  awayTeamColor?: TeamColor;
  mobileBreakpoint?: number;
}> = React.memo(
  ({
    season,
    competition,
    match,
    isApp = false,
    title = 'Line-ups',
    homeTeamColor = { light: '#000000', dark: '#a19c9cff' },
    awayTeamColor = { light: '#007A3F', dark: '#007A3F' },
    mobileBreakpoint = 0
  }) => {
    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: 'starting_formations',
              season,
              competition,
              match,
              template: 'normal',
              live: true,
              orientation: 'horizontal',
              side: 'both',
              show_match_header: true,
              show_crests: false,
              show_pitch_crests: false,
              show_team_formation: true,
              show_score: false,
              show_halftime_score: false,
              show_competition_name: false,
              show_date: false,
              date_format: 'dddd D MMMM YYYY',
              narrow_date_format: 'DD/MM/YY',
              show_referee: false,
              show_venue: false,
              show_attendance: false,
              show_images: false,
              show_pitch_images: false,
              show_team_sheets: false,
              show_event_icons: true,
              show_player_names: true,
              show_player_stats: true,
              show_subs: false,
              competition_naming: 'brief',
              team_naming: 'full',
              player_naming: 'last_name',
              show_live: false,
              show_logo: false,
              show_title: false,
              breakpoints: '430, 700'
            }).outerHTML;

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

    return (
      <StartingFormationsWrapper
        isApp={isApp}
        className="starting-formations-widget"
      >
        <h3>{title}</h3>
        <DesktopLoadingWrapper>
          <WidgetContainer
            ref={ref}
            isApp={isApp}
            homeTeamColor={homeTeamColor}
            awayTeamColor={awayTeamColor}
            mobileBreakpoint={mobileBreakpoint}
          />
          {!isReady && (
            <DesktopPlaceholderContainer data-testid="placeholder">
              <Placeholder />
            </DesktopPlaceholderContainer>
          )}
        </DesktopLoadingWrapper>
      </StartingFormationsWrapper>
    );
  }
);