import React, {useCallback} from 'react';
import {View} from 'react-native';
import {IconPlus, IconX} from '@tabler/icons-react-native';
import {IconButton, Typography} from '@components';
import {TeamFlag} from '@modules/prodev2/components/TeamFlag';
import {TeamWithGroup} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const FLAG_EMOJI_SIZE = 28;

export interface TeamRowProps {
  team: TeamWithGroup;
  isSelected: boolean;
  isDisabled: boolean;
  onPress: (team: TeamWithGroup) => void;
}

export function TeamRow({team, isSelected, isDisabled, onPress}: TeamRowProps) {
  const {theme} = useTheme();

  const onIconPress = useCallback(() => onPress(team), [onPress, team]);

  return (
    <View
      style={[styles.row, {borderBottomColor: theme.border.neutral.default}]}>
      <View style={styles.left}>
        <View
          style={[
            styles.flagWrapper,
            {backgroundColor: theme.background.layout.default},
          ]}>
          <TeamFlag
            emoji={team.emoji}
            countryCode={team.countryCode}
            flagUrl={team.flagUrl}
            name={team.name}
            emojiSize={FLAG_EMOJI_SIZE}
            containerStyle={styles.flagContent}
            imageStyle={styles.flagImage}
            emojiStyle={styles.flagEmoji}
          />
        </View>
        <Typography variant="s" weight="semiBold" numberOfLines={1}>
          {team.localizedName ?? team.name}
        </Typography>
      </View>
      <IconButton
        Icon={isSelected ? IconX : IconPlus}
        variant="secondary"
        size="lg"
        disabled={isDisabled}
        iconColor={isDisabled ? theme.text.neutral.lighter : undefined}
        style={
          isDisabled ? {borderColor: theme.text.neutral.disabled} : undefined
        }
        onPress={onIconPress}
      />
    </View>
  );
}