import React, {useCallback, useLayoutEffect, useMemo, useRef} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, Spinner, StateCard, Tabs, TabsRef} from '@components';
import {Navigation} from '@interfaces/navigation';
import {PredictionsTab} from '@modules/prodev2/components/PredictionsTab';
import {RankingTab} from '@modules/prodev2/components/RankingTab';
import {RulesTab} from '@modules/prodev2/components/RulesTab';
import {prodeKeys} from '@modules/prodev2/constants';
import {useProdeTitle} from '@modules/prodev2/hooks/useProdeTitle';
import {getCompetition, getNextToPredict} from '@modules/prodev2/services';
import {useQuery} from '@shared/hooks/queries-v5/useQuery';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const PREDICTIONS_KEY = 'predictions';
const RANKING_KEY = 'ranking';
const RULES_KEY = 'rules';
const TAB_KEYS = [PREDICTIONS_KEY, RANKING_KEY, RULES_KEY] as const;

export default function CompetitionDetail({
  navigation,
  route: {params},
}: Navigation<Screens.PRODEV2_COMPETITION_DETAIL>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {competitionId, initialTab} = params;
  const tabsRef = useRef<TabsRef>(null);

  const initialIndex = useMemo(() => {
    if (!initialTab) return 0;
    const idx = TAB_KEYS.indexOf(initialTab);
    return idx === -1 ? 0 : idx;
  }, [initialTab]);

  const title = useProdeTitle();

  useLayoutEffect(() => {
    navigation.setOptions({title});
  }, [navigation, title]);

  const {data: competition, isLoading} = useQuery(
    prodeKeys.competition(competitionId),
    () => getCompetition(competitionId),
    {enabled: !!competitionId},
  );
  const {data: nextToPredict} = useQuery(
    prodeKeys.nextToPredict(competitionId),
    () => getNextToPredict(competitionId),
  );

  const hasPendingPrediction =
    !!nextToPredict?.match && nextToPredict.isPredictionOpen;

  const containerStyle = [
    styles.container,
    {backgroundColor: theme.background.layout.tertiary},
  ];

  const TAB_ROUTES = useMemo(
    () => [
      {
        key: PREDICTIONS_KEY,
        label: t('sportsPool.tabs.predictions'),
        badge: hasPendingPrediction,
      },
      {
        key: RANKING_KEY,
        label: t('sportsPool.tabs.ranking'),
      },
      {
        key: RULES_KEY,
        label: t('sportsPool.tabs.rules'),
      },
    ],
    [hasPendingPrediction, t],
  );

  const onNavigateToRanking = useCallback(() => {
    tabsRef.current?.goToRouteKey(RANKING_KEY);
  }, []);

  const renderScene = useCallback(
    ({route: {key}}: RenderSceneProps) => {
      switch (key) {
        case PREDICTIONS_KEY:
          return competition ? (
            <PredictionsTab
              competitionId={competitionId}
              competition={competition}
              onNavigateToRanking={onNavigateToRanking}
            />
          ) : null;
        case RANKING_KEY:
          return <RankingTab competitionId={competitionId} />;
        case RULES_KEY:
          return <RulesTab competitionId={competitionId} />;
        default:
          return null;
      }
    },
    [competition, competitionId, onNavigateToRanking],
  );

  if (isLoading) {
    return (
      <View style={[containerStyle, styles.centered]}>
        <Spinner />
      </View>
    );
  }

  if (!competition) {
    return (
      <View style={[containerStyle, styles.centered]}>
        <StateCard
          variant="empty"
          title={t('sportsPool.competitions.no_access_title')}
          description={t('sportsPool.competitions.no_access_description')}
        />
      </View>
    );
  }

  return (
    <View style={containerStyle}>
      <Tabs
        ref={tabsRef}
        routes={TAB_ROUTES}
        renderScene={renderScene}
        backgroundColor="background.layout.tertiary"
        withDivider
        fullWidth
        lazy
        initialIndex={initialIndex}
        headerStyle={styles.tabsHeader}
      />
    </View>
  );
}