import React, { useEffect, useState } from 'react';

import { Placeholder } from '@times-components/image';

import {
  initSettings,
  initStyleSheet,
  initScript,
  initElement,
  initComponent
} from '../../utils/config';

import { PlaceholderContainer } from '../shared-styles';
import { Container, WidgetContainer } from './styles';
import { isNationalCompetition } from '../../utils/replaceTeamDetails';
import { useUpdateTeamDetails } from '../../utils/useUpdateTeamDetails';
import { useFixturePageLink } from '../../utils/useFixturePageLink';
import { useAddFixtureNavigation } from '../../utils/useAddFixtureNavigation';
import { useLiveMinuteUpdater } from '../../utils/useLiveMinuteUpdater';
import { useReorderPenaltyScore } from '../../utils/useReorderPenaltyScore';

export type OptaSport = 'cricket' | 'rugby' | 'football';

export type OptaFixturesTickerProps = {
  season: string;
  competition: string;
  date_from?: string | null;
  date_to?: string | null;
  days_ahead?: number;
  days_before?: number;
  round?: string;
  isApp?: boolean;
  showButtons?: boolean;
  fixturesPageUrl?: string;
  sport: OptaSport;
  matchStatsBasePath?: string;
};

export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
  ({
    season,
    competition,
    date_from,
    date_to,
    days_ahead,
    days_before,
    round,
    isApp,
    showButtons,
    fixturesPageUrl,
    sport,
    matchStatsBasePath
  }) => {
    const ref = React.createRef<HTMLDivElement>();
    const isNationalComp = isNationalCompetition(competition, sport);
    const [isReady, setIsReady] = useState<boolean>(false);

    useEffect(
      () => {
        initSettings();
        initStyleSheet(sport);

        initScript()
          .then(() => {
            if (ref.current) {
              ref.current.innerHTML = initElement('opta-widget', {
                sport,
                widget: 'fixtures',
                season,
                competition,
                date_from,
                date_to,
                days_ahead,
                days_before,
                round,
                live: true,
                start_on_current: true,
                template: 'strip',
                team_naming: 'brief',
                match_status: 'all',
                order_by: 'date_ascending',
                show_grouping: true,
                show_crests: true,
                show_date: true,
                show_live: true,
                date_format: 'ddd Do MMM',
                fixture_width: 160,
                breakpoints: 520
              }).outerHTML;

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

    (isNationalComp || sport === 'rugby') &&
      useUpdateTeamDetails(ref, 'Opta-TeamName');

    fixturesPageUrl &&
      !isApp &&
      useFixturePageLink(ref, 'Opta-Room', fixturesPageUrl);

    sport === 'football' &&
      useAddFixtureNavigation({
        ref,
        sport,
        competition,
        season,
        matchStatsBasePath,
        isApp
      });

    sport === 'football' &&
      useLiveMinuteUpdater({
        ref
      });

    sport === 'football' && useReorderPenaltyScore(ref);

    return (
      <Container>
        {!isReady && (
          <PlaceholderContainer className="opta-placeholder">
            <Placeholder />
          </PlaceholderContainer>
        )}
        <WidgetContainer ref={ref} isApp={isApp} showButtons={showButtons} />
      </Container>
    );
  }
);