import React, { useRef, 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,
  WidgetContent,
  TimelineWrapper
} from './WidgetContainer';

export const OptaMatchStatsTimeline: React.FC<{
  season: string;
  competition: string;
  match: string;
  isApp?: boolean;
  hasBorder?: boolean;
  homeTeam?: string;
  awayTeam?: string;
}> = React.memo(
  ({
    season,
    competition,
    match,
    isApp = false,
    hasBorder = false,
    homeTeam,
    awayTeam
  }) => {
    const ref = useRef<HTMLDivElement>(null);
    const widgetRef = useRef<HTMLDivElement>(null);
    const [isReady, setIsReady] = useState<boolean>(false);

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

      initSettings();
      initStyleSheet(sport);
      initScript()
        .then(() => {
          if (widgetRef.current) {
            widgetRef.current.innerHTML = initElement('opta-widget', {
              sport,
              widget: 'timeline',
              season,
              competition,
              match,
              template: 'normal',
              live: true,
              orientation: 'horizontal',
              vertical_timebar_height: 260,
              group_substitutions: true,
              show_match_header: false,
              show_score: true,
              show_crests: true,
              show_assists: 'all',
              show_team_formation: true,
              show_clock: true,
              show_period_dividers: true,
              show_halftime_score: true,
              show_date: true,
              date_format: 'dddd D MMMM YYYY',
              narrow_date_format: 'DD/MM/YY',
              show_attendance: false,
              show_images: true,
              show_referee: false,
              show_venue: false,
              show_cards: 'all',
              show_goals: true,
              show_penalties_missed: true,
              show_subs: true,
              show_goals_combined: true,
              show_shootouts: true,
              show_competition_name: true,
              competition_naming: 'full',
              team_naming: 'brief',
              player_naming: 'full',
              show_live: true,
              show_logo: false,
              show_title: true,
              breakpoints: '300, 700'
            }).outerHTML;

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

    return (
      <TimelineWrapper isApp={isApp} hasBorder={hasBorder}>
        <h3>Timeline</h3>
        <WidgetContainer ref={ref} isApp={isApp} hasBorder={hasBorder}>
          <span className="timeline-chart-team-label timeline-team-home">
            <span className="timeline-team-swatch" />
            {homeTeam || 'Home'}
          </span>
          <WidgetContent ref={widgetRef} />
          <span className="timeline-chart-team-label timeline-team-away">
            <span className="timeline-team-swatch" />
            {awayTeam || 'Away'}
          </span>
        </WidgetContainer>
        {!isReady && (
          <PlaceholderContainer data-testid="placeholder">
            <Placeholder />
          </PlaceholderContainer>
        )}
      </TimelineWrapper>
    );
  }
);