import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, StateCard, TabsChips} from '@components';
import {getPrizes, getRules} from '@modules/prodev2/services';
import {prodeKeys} from '@modules/prodev2/constants';
import {isPodiumPrize} from '@modules/prodev2/utils';
import type {Prize} from '@modules/prodev2/interfaces';
import {useQuery} from '@shared/hooks/queries-v5/useQuery';
import {useTheme} from '@shared/theme';

import {RulesTabSkeleton} from '../CardSkeletons';
import {styles} from './styles';
import {DetailsScene} from './components/DetailsScene';
import {PrizesScene} from './components/PrizesScene';
import {FAQsScene} from './components/FAQsScene';

const DETAILS_KEY = 'details';
const PRIZES_KEY = 'prizes';
const FAQS_KEY = 'faqs';

interface Props {
  competitionId: number;
}

export function RulesTab({competitionId}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const {
    data: rules,
    isLoading: isRulesLoading,
    isError: isRulesError,
  } = useQuery(prodeKeys.rules(competitionId), () => getRules(competitionId), {
    enabled: !!competitionId,
  });

  const {
    data: prizes,
    isLoading: isPrizesLoading,
    isError: isPrizesError,
  } = useQuery(prodeKeys.prizes(competitionId), () => getPrizes(competitionId));

  const isLoading = isRulesLoading || isPrizesLoading;
  const isError = isRulesError || isPrizesError;

  const allPrizes = useMemo(() => {
    const prizesMap = new Map<number, Prize>();
    [...(prizes?.podiumPrizes ?? []), ...(prizes?.otherPrizes ?? [])].forEach(
      prize => {
        prizesMap.set(prize.id, prize);
      },
    );

    return [...prizesMap.values()].sort((firstPrize, secondPrize) => {
      const firstPositionEnd =
        firstPrize.positionEnd ?? firstPrize.positionStart;
      const secondPositionEnd =
        secondPrize.positionEnd ?? secondPrize.positionStart;

      if (firstPrize.positionStart !== secondPrize.positionStart) {
        return firstPrize.positionStart - secondPrize.positionStart;
      }

      return firstPositionEnd - secondPositionEnd;
    });
  }, [prizes?.otherPrizes, prizes?.podiumPrizes]);

  const podiumPrizes = useMemo(
    () => allPrizes.filter(isPodiumPrize),
    [allPrizes],
  );
  const otherPrizes = useMemo(
    () => allPrizes.filter(prize => !isPodiumPrize(prize)),
    [allPrizes],
  );

  const hasPrizesTab =
    podiumPrizes.length > 0 ||
    otherPrizes.length > 0 ||
    !!rules?.considerations;

  const routes = useMemo(
    () => [
      {key: DETAILS_KEY, label: t('sportsPool.rules_tab.details')},
      ...(hasPrizesTab
        ? [{key: PRIZES_KEY, label: t('sportsPool.rules_tab.prizes')}]
        : []),
      {key: FAQS_KEY, label: t('sportsPool.rules_tab.faqs')},
    ],
    [hasPrizesTab, t],
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      switch (route.key) {
        case DETAILS_KEY:
          return <DetailsScene rules={rules} />;

        case PRIZES_KEY:
          return (
            <PrizesScene
              podiumPrizes={podiumPrizes}
              otherPrizes={otherPrizes}
              ruleConsiderations={rules?.considerations}
            />
          );

        case FAQS_KEY:
          return <FAQsScene items={rules?.faq ?? []} />;
        default:
          return null;
      }
    },
    [rules, podiumPrizes, otherPrizes],
  );

  if (isLoading) {
    return <RulesTabSkeleton />;
  }

  if (isError) {
    return (
      <View style={styles.loadingContainer}>
        <StateCard
          variant="error"
          title={t('general.error_title')}
          description={t('sportsPool.podium.error_description')}
        />
      </View>
    );
  }

  return (
    <TabsChips
      routes={routes}
      renderScene={renderScene}
      usePager={false}
      swipeEnabled={false}
      tabsBackgroundColor={theme.background.layout.default}
    />
  );
}