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';
import { TeamColor } from '../shared/types';
import { useUpdateTimestamps } from './useUpdateTimestamps';

export const OptaMatchStatsCommentary: React.FC<{
  season: string;
  competition: string;
  match: string;
  isApp?: boolean;
  homeTeamColor?: TeamColor;
  awayTeamColor?: TeamColor;
}> = React.memo(
  ({
    season,
    competition,
    match,
    isApp = false,
    homeTeamColor = { light: '#000000', dark: '#a19c9cff' },
    awayTeamColor = { light: '#007A3F', dark: '#007A3F' }
  }) => {
    const ref = React.createRef<HTMLDivElement>();
    const [isReady, setIsReady] = useState<boolean>(false);
    useUpdateTimestamps(ref);

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

      initSettings();
      initStyleSheet(sport);
      initScript()
        .then(() => {
          if (ref.current) {
            ref.current.innerHTML = initElement('opta-widget', {
              sport,
              widget: 'commentary',
              season,
              competition,
              match,
              template: 'normal',
              live: true,
              data_type: 'auto',
              order_by: 'time_descending',
              show_event_icons: true,
              show_minor_events: true,
              fixed_height_comments: '0',
              show_live: false,
              show_logo: false,
              show_title: false
            }).outerHTML;

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

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