import React from 'react';
import {Image, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {LinearGradient} from 'expo-linear-gradient';
import positionHero from '@assets/prode/position-hero.png';
import {Pressable, Typography} from '@components';
import {UserRankingSummary} from '@modules/prodev2/interfaces';

import {
  GRADIENT_COLORS,
  GRADIENT_END,
  GRADIENT_START,
  HERO_TEXT,
  HERO_TEXT_MUTED,
} from '../ProdeHeroCard/styles';
import {styles} from './styles';

export interface Props {
  ranking?: Nullable<UserRankingSummary>;
  onPress?: () => void;
}

export function PositionTile({ranking, onPress}: Props) {
  const {t} = useTranslation();

  const card = (
    <LinearGradient
      colors={GRADIENT_COLORS}
      start={GRADIENT_START}
      end={GRADIENT_END}
      style={styles.card}>
      <Image source={positionHero} style={styles.banner} resizeMode="cover" />
      <View style={styles.info}>
        <Typography variant="s" color={HERO_TEXT_MUTED}>
          {t('sportsPool.hero.position_label')}
        </Typography>
        <Typography variant="xxl" weight="semiBold" color={HERO_TEXT}>
          {ranking?.position != null ? `#${ranking.position}` : '-'}
        </Typography>
        <Typography variant="s" weight="semiBold" color={HERO_TEXT}>
          {t('sportsPool.hero.points', {points: ranking?.totalPoints ?? 0})}
        </Typography>
      </View>
    </LinearGradient>
  );

  if (onPress) {
    return (
      <Pressable onPress={onPress} style={styles.pressable}>
        {card}
      </Pressable>
    );
  }
  return card;
}

export default PositionTile;