import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconInfoCircle} from '@tabler/icons-react-native';
import {Dialog, Typography} from '@components';
import {TournamentPrediction} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {PodiumPlacementItem} from './components/PodiumPlacementItem';
import {styles} from './styles';

export interface PodiumPreviewContentProps {
  isVisible: boolean;
  onClose: () => void;
  prediction: Nullable<TournamentPrediction>;
  deadline?: string;
  isOpen?: boolean;
  onModify: () => void;
}

export function PodiumPreviewContent({
  isVisible,
  onClose,
  prediction,
  deadline,
  isOpen,
  onModify,
}: PodiumPreviewContentProps) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  const footer = useMemo(() => {
    if (!isOpen || !prediction) {
      return undefined;
    }
    return {
      primaryButton: {
        text: t('sportsPool.ranking_page.modify_podium'),
        onPress: onModify,
      },
      ...(deadline
        ? {
            infoText: t('sportsPool.ranking_page.can_modify_until', {
              date: deadline,
            }),
            withIconPrefix: false,
          }
        : {}),
    };
  }, [deadline, isOpen, onModify, prediction, t]);

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={t('sportsPool.ranking_page.my_ideal_podium')}
      withCloseButton
      footer={footer}>
      <View style={styles.container}>
        {prediction ? (
          <>
            <PodiumPlacementItem
              emoji={'🏆'}
              label={t('sportsPool.podium.champion')}
              team={prediction.championTeam}
            />
            <PodiumPlacementItem
              emoji={'🥈'}
              label={t('sportsPool.podium.runner_up')}
              team={prediction.runnerUpTeam}
            />
            <PodiumPlacementItem
              emoji={'🥉'}
              label={t('sportsPool.podium.third_place')}
              team={prediction.thirdPlaceTeam}
              showBorder={false}
            />
          </>
        ) : null}
        {!isOpen && deadline ? (
          <View style={styles.deadlineRow}>
            <IconInfoCircle
              size={iconSizes.x4}
              color={theme.text.neutral.lighter}
            />
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {t('sportsPool.ranking_page.can_modify_until', {date: deadline})}
            </Typography>
          </View>
        ) : null}
      </View>
    </Dialog>
  );
}

export default PodiumPreviewContent;