import React, {useMemo} from 'react';
import {Image, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronRight} from '@tabler/icons-react-native';
import bannerProde from '@assets/prodev2/banner-prode.webp';
import {ListItem, Typography} from '@components';
import {Pressable} from '@components/_core/Pressable';
import {getDaysUntil} from '@modules/prodev2/utils';
import type {Competition} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface CompetitionCardProps {
  competition: Competition;
  onPress: (competition: Competition) => void;
}

export function CompetitionCard({competition, onPress}: CompetitionCardProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const onCompetitionPress = () => {
    onPress(competition);
  };

  const statusText = useMemo(() => {
    const {status, startDate, endDate} = competition;

    if (status === 'SCHEDULED') {
      const daysUntilStart = getDaysUntil(startDate);
      if (daysUntilStart != null && daysUntilStart >= 0) {
        const key =
          daysUntilStart === 1
            ? 'sportsPool.competition.starts_in_days'
            : 'sportsPool.competition.starts_in_days_plural';
        return t(key, {count: daysUntilStart});
      }
    }

    if (status === 'ACTIVE') {
      const daysUntilEnd = getDaysUntil(endDate);
      if (daysUntilEnd != null && daysUntilEnd >= 0) {
        const key =
          daysUntilEnd === 1
            ? 'sportsPool.competition.ends_in_days'
            : 'sportsPool.competition.ends_in_days_plural';
        return t(key, {count: daysUntilEnd});
      }
      return t('sportsPool.competition.status.active');
    }

    if (status === 'FINISHED') {
      return t('sportsPool.competition.status.finished');
    }

    return null;
  }, [competition, t]);

  const bannerSource = competition.coverImageUrl
    ? {uri: competition.coverImageUrl}
    : bannerProde;

  return (
    <Pressable
      onPress={onCompetitionPress}
      accessibilityLabel={competition.name}
      accessibilityRole="button"
      style={[
        styles.wrapper,
        {
          borderColor: theme.border.neutral.default,
          backgroundColor: theme.background.elements.default,
        },
      ]}>
      <Image source={bannerSource} style={styles.banner} resizeMode="cover" />
      <ListItem
        title={competition.name}
        titleNumberOfLines={2}
        withRightIcon
        RightButton={IconChevronRight}
        onItemPress={onCompetitionPress}
        accessibilityLabel={competition.name}
      />
      {!!statusText && (
        <View
          style={[
            styles.footerBadge,
            {
              backgroundColor: theme.background.feedback.info,
              borderTopColor: theme.border.states.info,
            },
          ]}>
          <Typography variant="xxs" color={theme.text.feedback.info}>
            {statusText}
          </Typography>
        </View>
      )}
    </Pressable>
  );
}

export default CompetitionCard;