import React from 'react';
import {View} from 'react-native';
import {Avatar, Divider, Pressable, Typography} from '@components';
import {RankingEntry} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {PositionArrow} from '../PositionArrow';
import {styles} from './styles';

interface Props {
  entry: RankingEntry;
  isLast?: boolean;
  isHighlighted?: boolean;
  onPress?: (entry: RankingEntry) => void;
}

export function RankingRow({entry, isLast, isHighlighted, onPress}: Props) {
  const {theme} = useTheme();

  const onRowPress = () => onPress?.(entry);

  const rowContent = (
    <View
      style={[
        styles.row,
        isHighlighted && {
          backgroundColor: theme.action.background.brand.selected,
        },
      ]}>
      <View style={styles.arrowContainer}>
        <PositionArrow direction={entry.positionDirection} />
      </View>

      <Typography
        variant="xxs"
        weight="semiBold"
        style={styles.position}
        numberOfLines={1}>
        {entry.position ?? '-'}
      </Typography>

      <View style={styles.userContainer}>
        <Avatar
          url={entry.userAvatarUrl}
          name={entry.userName ?? undefined}
          size="md"
        />
        <Typography
          variant="xs"
          weight={isHighlighted ? 'semiBold' : 'regular'}
          style={styles.userName}
          numberOfLines={1}>
          {entry.userName ?? ''}
        </Typography>
      </View>

      <Typography
        variant={isHighlighted ? 's' : 'xs'}
        weight="semiBold"
        color={isHighlighted ? theme.text.neutral.brand : undefined}>
        {entry.totalPoints ?? '-'}
      </Typography>
    </View>
  );

  return (
    <View
      style={[
        styles.rowContainer,
        isLast && styles.rowContainerLast,
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
      ]}>
      {onPress ? (
        <Pressable onPress={onRowPress}>{rowContent}</Pressable>
      ) : (
        rowContent
      )}
      {!isLast && <Divider />}
    </View>
  );
}