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, WidgetContainer } from './styles';
import { useAddFixtureNavigation } from '../../utils/useAddFixtureNavigation';

export const OptaFootballFixturesPageView: React.FC<{
  season: string;
  competition: string;
  isApp?: boolean;
  onWidgetReady?: (container: HTMLDivElement) => void;
  full_width?: boolean;
  heightSm?: number;
  heightMd?: number;
  heightLg?: number;
  matchStatsBasePath?: string;
  activeTabPosition?: number;
  grouping?: string;
  [key: string]: any;
}> = React.memo(
  ({
    season,
    competition,
    isApp = false,
    onWidgetReady,
    full_width,
    heightSm,
    heightMd,
    heightLg,
    matchStatsBasePath,
    activeTabPosition = 1,
    grouping = 'round',
    ...widgetProps
  }) => {
    const ref = useRef<HTMLDivElement>(null);
    const [isReady, setIsReady] = useState<boolean>(false);

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

        initSettings();
        initStyleSheet(sport);
        let observer: MutationObserver | null = null;

        initScript()
          .then(() => {
            const currentContainer = ref.current;
            if (currentContainer) {
              currentContainer.innerHTML = initElement('opta-widget', {
                sport,
                widget: 'fixtures',
                season,
                competition,
                template: 'normal',
                live: true,
                show_venue: true,
                match_status: 'all',
                show_grouping: true,
                default_nav: 'true',
                start_on_current: true,
                show_subgrouping: true,
                order_by: 'date_ascending',
                show_crests: true,
                date_format: 'dddd D MMMM YYYY',
                time_format: 'HH:mm',
                month_date_format: 'MMMM',
                competition_naming: 'full',
                team_naming: 'full',
                pre_match: false,
                show_live: true,
                show_logo: true,
                show_title: true,
                breakpoints: 1,
                grouping,
                navigation: 'tabs',
                sub_grouping: 'date|venue',
                ...widgetProps
              }).outerHTML;

              initComponent();
              if (onWidgetReady) {
                onWidgetReady(currentContainer);
              }

              observer = new MutationObserver(() => {
                const items = currentContainer.querySelectorAll(
                  '.Opta-Nav ul li'
                );
                const targetIndex = activeTabPosition - 1;

                if (items.length > targetIndex && targetIndex >= 0) {
                  const targetLi = items[targetIndex];
                  const clickTarget =
                    targetLi.querySelector('a, button, span') || targetLi;

                  (clickTarget as HTMLElement).click();

                  setTimeout(() => {
                    targetLi.scrollIntoView({
                      behavior: 'smooth',
                      inline: 'center',
                      block: 'nearest'
                    });
                  }, 150);

                  if (observer) {
                    observer.disconnect();
                  }
                }
              });

              observer.observe(currentContainer, {
                childList: true,
                subtree: true
              });
            }
          })
          .then(() => {
            setIsReady(true);
          });

        return () => {
          if (observer) {
            observer.disconnect();
          }
        };
      },
      [competition, season, onWidgetReady, activeTabPosition]
    );

    useAddFixtureNavigation({
      ref,
      sport: 'football',
      competition,
      season,
      isApp
    });

    return (
      <PageViewContainer
        fullWidth={full_width}
        heightSm={heightSm}
        heightMd={heightMd}
        heightLg={heightLg}
      >
        <WidgetContainer ref={ref} isApp={isApp} />
        {!isReady && (
          <PlaceholderContainer className="opta-placeholder">
            <Placeholder />
          </PlaceholderContainer>
        )}
      </PageViewContainer>
    );
  }
);