import { IconX } from '@material-hu/icons/tabler';
import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { useTheme } from '@material-hu/mui/styles';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { TeamWithGroup } from 'src/types/prode';

import TeamFlag from './TeamFlag';

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

type PodiumSlotProps = {
  position: PodiumPosition;
  team: TeamWithGroup | null;
  label: string;
  icon: React.ReactNode;
  number: number;
  isSelected: boolean;
  onSelect: () => void;
  onRemove: () => void;
};

const PodiumSlot = ({
  team,
  label,
  icon,
  number,
  isSelected,
  onSelect,
  onRemove,
}: PodiumSlotProps) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();

  const greyBg = theme.palette.new.background.elements.grey;

  return (
    <SelectionCard
      checked={isSelected}
      onClick={onSelect}
      fullWidth
      padding={0}
      sx={{ flex: 1, overflow: 'hidden' }}
    >
      <Stack
        sx={{
          p: 1,
          gap: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          {icon}
          <Typography
            variant="globalXXS"
            fontWeight="fontWeightSemiBold"
            noWrap
          >
            {label}
          </Typography>
        </Stack>

        {team && (
          <Stack
            sx={{
              alignItems: 'center',
              position: 'relative',
              gap: 0.5,
            }}
          >
            <TeamFlag
              countryCode={team.countryCode}
              flagUrl={team.flagUrl}
              name={team.name}
              emoji={team.emoji}
              size={36}
            />
            <IconButton
              size="small"
              onClick={e => {
                e.stopPropagation();
                onRemove();
              }}
              sx={{
                position: 'absolute',
                top: -4,
                right: -12,
                backgroundColor: greyBg,
                width: 24,
                height: 24,
                borderRadius: 0.5,
              }}
            >
              <IconX size={10} />
            </IconButton>
            <Typography
              variant="globalXXS"
              fontWeight="fontWeightSemiBold"
              noWrap
              sx={{ textAlign: 'center', maxWidth: '100%' }}
            >
              {team.localizedName ?? team.name}
            </Typography>
          </Stack>
        )}

        {!team && (
          <Stack sx={{ alignItems: 'center', gap: 0.5 }}>
            <Typography sx={{ fontSize: 36, lineHeight: 1 }}>🏳️</Typography>
            <Typography
              variant="globalXXS"
              fontWeight="fontWeightSemiBold"
              noWrap
              sx={{
                color: theme.palette.new.text.neutral.lighter,
                textAlign: 'center',
              }}
            >
              {t('podium.team_placeholder', { number })}
            </Typography>
          </Stack>
        )}
      </Stack>
    </SelectionCard>
  );
};

export default PodiumSlot;
