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 Skeleton from '@material-hu/components/design-system/Skeleton';
import { IconPodiumSport } from 'src/assets/svg/IconPodiumSport';
import { IconChevronRight } from '@material-hu/icons/tabler';
import { type TournamentPredictionResponse } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';
import SportsPoolHeaderCard from './SportsPoolHeaderCard';
import TeamFlag from './TeamFlag';

export const PodiumPreviewCardSkeleton = () => (
  <SportsPoolHeaderCard>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
        padding: { xs: 2, md: 3 },
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
        <Skeleton
          variant="text"
          width={24}
          height={24}
        />
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width={80}
            height={14}
          />
          <Skeleton
            variant="text"
            width={140}
            height={18}
          />
          <Skeleton
            variant="text"
            width={160}
            height={14}
          />
        </Stack>
      </Stack>
      <Skeleton
        variant="circular"
        width={24}
        height={24}
      />
    </Stack>
  </SportsPoolHeaderCard>
);

type PodiumPreviewCardProps = {
  tournamentPrediction: TournamentPredictionResponse;
  deadline?: string;
  onClick?: () => void;
};

const PodiumPreviewCard = ({
  tournamentPrediction,
  deadline,
  onClick,
}: PodiumPreviewCardProps) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();
  const prediction = tournamentPrediction.prediction;

  if (!prediction) return null;

  return (
    <SportsPoolHeaderCard onClick={onClick}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
          height: {
            sm: 'auto',
            md: '94px',
          },
          padding: { xs: 2, md: 3 },
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1.5,
          }}
        >
          <Stack
            sx={{
              width: 40,
              height: 40,
              borderRadius: '100px',
              backgroundColor: theme.palette.new.background.elements.brand,
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <IconPodiumSport
              size={24}
              color={theme.palette.newBase?.brand[900]}
            />
          </Stack>
          <Stack>
            <Typography
              variant="globalXXS"
              sx={{ color: theme.palette.new.text.neutral.lighter }}
            >
              {t('ranking_page.ideal_podium')}
            </Typography>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.5,
              }}
            >
              {prediction.championTeam && (
                <TeamFlag
                  countryCode={prediction.championTeam.countryCode}
                  flagUrl={prediction.championTeam.flagUrl}
                  name={prediction.championTeam.name}
                  emoji={prediction.championTeam.emoji}
                  size={16}
                />
              )}
              <Typography
                variant="globalXS"
                fontWeight="fontWeightSemiBold"
              >
                {prediction.championTeam?.localizedName ??
                  prediction.championTeam?.name}{' '}
                {t('ranking_page.champion_suffix')}
              </Typography>
            </Stack>
            {deadline && (
              <Typography
                variant="globalXXS"
                sx={{ color: theme.palette.new.text.neutral.lighter }}
              >
                {t('ranking_page.modify_until', { date: deadline })}
              </Typography>
            )}
          </Stack>
        </Stack>
        <IconButton sx={{ width: 40, height: 40 }}>
          <IconChevronRight
            size={24}
            color={theme.palette.new.text.neutral.default}
          />
        </IconButton>
      </Stack>
    </SportsPoolHeaderCard>
  );
};

export default PodiumPreviewCard;