import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronRight} from '@tabler/icons-react-native';
import PodiumSport from '@assets/prodev2/podiumSport.svg';
import {Typography} from '@components';
import {TournamentPredictionResponse} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {SportsPoolHeaderCard} from '../SportsPoolHeaderCard';
import {TeamFlag} from '../TeamFlag';
import {styles} from './styles';

export interface PodiumPreviewCardProps {
  tournamentPrediction: TournamentPredictionResponse;
  deadline?: string;
  onPress?: () => void;
}

export function PodiumPreviewCard({
  tournamentPrediction,
  deadline,
  onPress,
}: PodiumPreviewCardProps) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  const prediction = tournamentPrediction.prediction;
  if (!prediction) {
    return null;
  }

  return (
    <SportsPoolHeaderCard onPress={onPress}>
      <View style={styles.row}>
        <View
          style={[
            styles.iconWrapper,
            {backgroundColor: theme.background.elements.brand},
          ]}>
          <PodiumSport
            width={iconSizes.x6}
            height={iconSizes.x6}
            color={theme.text.neutral.brand}
          />
        </View>
        <View style={styles.info}>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t('sportsPool.ranking_page.my_ideal_podium')}
          </Typography>
          <View style={styles.championRow}>
            {prediction.championTeam ? (
              <TeamFlag
                countryCode={prediction.championTeam.countryCode}
                flagUrl={prediction.championTeam.flagUrl}
                name={prediction.championTeam.name}
                emojiSize={16}
                imageStyle={styles.flagImage}
              />
            ) : null}
            <Typography variant="xs" weight="semiBold" numberOfLines={1}>
              {prediction.championTeam
                ? `${
                    prediction.championTeam.localizedName ??
                    prediction.championTeam.name
                  } ${t('sportsPool.ranking_page.champion_suffix')}`
                : ''}
            </Typography>
          </View>
          {deadline ? (
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {t('sportsPool.ranking_page.modify_until', {date: deadline})}
            </Typography>
          ) : null}
        </View>
        <View style={styles.chevronButton}>
          <IconChevronRight
            size={iconSizes.x6}
            color={theme.text.neutral.brand}
          />
        </View>
      </View>
    </SportsPoolHeaderCard>
  );
}

export default PodiumPreviewCard;