import React, {ReactNode} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconX} from '@tabler/icons-react-native';
import {IconButton, Pressable, Typography} from '@components';
import {TeamWithGroup} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

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

export type PodiumPosition = 'champion' | 'runnerUp' | 'thirdPlace';

export interface PodiumSlotProps {
  position: PodiumPosition;
  team: Nullable<TeamWithGroup>;
  label: string;
  icon?: ReactNode;
  number: number;
  isSelected: boolean;
  onSelect: () => void;
  onRemove: () => void;
}

export function PodiumSlot({
  team,
  label,
  icon,
  number,
  isSelected,
  onSelect,
  onRemove,
}: PodiumSlotProps) {
  const {t} = useTranslation();
  const {theme, iconSizes, borderRadius} = useTheme();

  const containerStyle = [
    styles.container,
    {
      borderRadius: borderRadius.l,
      backgroundColor: isSelected
        ? theme.background.elements.brand
        : theme.background.elements.default,
      borderColor: isSelected ? theme.border.neutral.brand : 'transparent',
      borderWidth: isSelected ? 2 : 0,
    },
  ];

  return (
    <Pressable onPress={onSelect} style={containerStyle}>
      <View style={styles.header}>
        {icon}
        <Typography
          variant="xs"
          weight="semiBold"
          numberOfLines={1}
          align="center">
          {label}
        </Typography>
      </View>

      {team ? (
        <View style={styles.teamContent}>
          <View style={styles.flagWrapper}>
            <TeamFlag
              emoji={team.emoji}
              countryCode={team.countryCode}
              flagUrl={team.flagUrl}
              name={team.name}
              emojiSize={36}
              imageStyle={styles.teamImage}
            />
            <View
              style={[
                styles.removeButtonWrapper,
                {backgroundColor: theme.background.elements.grey},
              ]}>
              <IconButton
                Icon={IconX}
                size="sm"
                variant="tertiary"
                iconColor={theme.text.neutral.default}
                onPress={onRemove}
                hitSlop={8}
              />
            </View>
          </View>
          <Typography
            variant="xs"
            weight="semiBold"
            align="center"
            numberOfLines={1}>
            {team.localizedName ?? team.name}
          </Typography>
        </View>
      ) : (
        <View style={styles.emptyContent}>
          <Typography
            align="center"
            style={{fontSize: iconSizes.x9, lineHeight: iconSizes.x9}}>
            {'🏳️'}
          </Typography>
          <Typography
            variant="xs"
            weight="semiBold"
            align="center"
            numberOfLines={1}
            color={theme.text.neutral.lighter}>
            {t('sportsPool.podium.team_placeholder', {number})}
          </Typography>
        </View>
      )}
    </Pressable>
  );
}

export default PodiumSlot;