import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {LinearGradient} from 'expo-linear-gradient';
import {Pressable, Typography} from '@components';
import {useCountdown} from '@modules/prodev2/hooks/useCountdown';
import {UserRankingSummary} from '@modules/prodev2/interfaces';

import {PositionTile} from '../PositionTile';
import {CountdownBox} from './CountdownBox';
import {
  GRADIENT_COLORS,
  GRADIENT_END,
  GRADIENT_START,
  HERO_TEXT,
  styles,
} from './styles';

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

export function ProdeHeroCard({
  startDate,
  ranking,
  hasTournamentStarted,
  onPress,
}: Props) {
  const {t} = useTranslation();
  const {days, hours, minutes, seconds, isExpired, isValid} =
    useCountdown(startDate);

  const showCountdown = !hasTournamentStarted && isValid && !isExpired;
  const hasPosition = ranking?.position != null;

  if (!showCountdown && !hasPosition) {
    return null;
  }

  if (!showCountdown) {
    return <PositionTile ranking={ranking} onPress={onPress} />;
  }

  const gradient = (
    <LinearGradient
      colors={GRADIENT_COLORS}
      start={GRADIENT_START}
      end={GRADIENT_END}
      style={styles.card}>
      <Typography variant="l" weight="semiBold" color={HERO_TEXT}>
        {t('sportsPool.countdown.starts_in')}
      </Typography>
      <View style={styles.countdownRow}>
        <CountdownBox label={t('sportsPool.countdown.days')} value={days} />
        <CountdownBox label={t('sportsPool.countdown.hours')} value={hours} />
        <CountdownBox
          label={t('sportsPool.countdown.minutes')}
          value={minutes}
        />
        <CountdownBox
          label={t('sportsPool.countdown.seconds')}
          value={seconds}
        />
      </View>
    </LinearGradient>
  );

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

  return gradient;
}

export default ProdeHeroCard;