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 OptaMatchStatsTable: React.FC<{
  season: string;
  competition: string;
  match?: string;
  competitionName: string;
  isApp?: boolean;
}> = React.memo(
  ({ season, competition, match, competitionName, 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: 'standings',
              season,
              competition,
              match,
              live: true,
              data_detail: 'full',
              dividers: '5,6,17',
              show_logo: true,
              show_title: false,
              show_key: true,
              show_crests: true,
              points_in_first_column: true,
              lose_before_draw: true,
              show_form: 5,
              date_format: 'dddd D MMMM YYYY',
              team_naming: 'brief'
            }).outerHTML;

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

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