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

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

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

import { PlaceholderContainer } from '../../shared/shared-styles';
import { PageViewContainer, Title, WidgetContainer } from './styles';

export const OptaFootballStatsPageView: React.FC<{
  season: string;
  competition: string;
  widget?: 'player_ranking' | 'team_ranking';
  visible_categories?: string;
  team?: string;
  default_nav?: number;
  limit?: number | string;
  show_images?: boolean;
  show_logo?: boolean;
  hide_zeroes?: boolean;
  breakpoints?: number | string;
  isApp?: boolean;
  bordered?: boolean;
  full_width?: boolean;
  title?: string;
  minHeight?: number;
  heightSm?: number;
  heightMd?: number;
  heightLg?: number;
  [key: string]: any;
}> = React.memo(
  ({
    season,
    competition,
    widget = 'player_ranking',
    visible_categories = 'goals,assists,chances,clean_sheets,cards_yellow,cards_red',
    team,
    default_nav = 1,
    limit = '100',
    show_images = true,
    show_logo = true,
    hide_zeroes = true,
    breakpoints = 1,
    isApp = false,
    bordered = false,
    full_width,
    title,
    minHeight,
    heightSm,
    heightMd,
    heightLg
  }) => {
    const ref = useRef<HTMLDivElement>(null);
    const [isReady, setIsReady] = useState<boolean>(false);

    const getCategoryPosition = (category: string) =>
      visible_categories.split(',').indexOf(category) + 1;

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

        initSettings();
        initStyleSheet(sport);
        initScript()
          .then(() => {
            if (ref.current) {
              ref.current.innerHTML = initElement('opta-widget', {
                sport,
                widget,
                season,
                competition,
                team,
                template: 'normal',
                live: true,
                show_match_header: true,
                show_halftime_score: true,
                show_competition_name: true,
                show_date: true,
                show_images,
                navigation: 'tabs_more',
                show_crests: true,
                show_ranks: true,
                show_appearances: false,
                visible_categories,
                default_nav,
                limit,
                hide_zeroes,
                show_team_names: true,
                team_naming: 'full',
                player_naming: 'full',
                show_logo,
                show_title: true,
                date_format: 'DD/MM/YYYY',
                breakpoints
              }).outerHTML;

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

        return undefined;
      },
      [competition, season]
    );

    return (
      <PageViewContainer
        fullWidth={full_width}
        heightSm={heightSm}
        heightMd={heightMd}
        heightLg={heightLg}
      >
        {title && <Title isApp={isApp}>{title}</Title>}
        <WidgetContainer
          ref={ref}
          isApp={isApp}
          bordered={bordered}
          widget={widget}
          minHeight={minHeight}
          yellowCardPosition={getCategoryPosition('cards_yellow')}
          redCardPosition={getCategoryPosition('cards_red')}
        />
        {!isReady && (
          <PlaceholderContainer className="opta-placeholder">
            <Placeholder />
          </PlaceholderContainer>
        )}
      </PageViewContainer>
    );
  }
);