import { IconChevronRight } from '@material-hu/icons/tabler';

import { IconPodiumSport } from 'src/assets/svg/IconPodiumSport';
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 { TournamentPredictionResponse } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { rankingAvatarSx, rankingCardContentSx } from '../constants';
import SportsPoolHeaderCard from './SportsPoolHeaderCard';
import PodiumPreviewCard from './PodiumPreviewCard';

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

const PodiumEmptyCard = ({
  deadline,
  onClick,
}: Omit<PodiumCardProps, 'tournamentPrediction'>) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();

  const iconColor = theme.palette.new.text.neutral.brand;

  return (
    <SportsPoolHeaderCard onClick={onClick}>
      <Stack sx={{ ...rankingCardContentSx, padding: { xs: 2, md: 3 } }}>
        <Stack sx={rankingAvatarSx}>
          <IconPodiumSport
            size={24}
            color={iconColor}
          />
        </Stack>
        <Stack sx={{ flex: 1 }}>
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
          >
            {t('podium.title')}
          </Typography>
          {deadline && (
            <Typography
              variant="globalXXS"
              sx={{ color: theme.palette.new.text.neutral.lighter }}
            >
              {t('podium.description', { date: deadline })}
            </Typography>
          )}
        </Stack>
        <IconButton sx={{ width: 40, height: 40 }}>
          <IconChevronRight
            size={24}
            color={theme.palette.new.text.neutral.default}
          />
        </IconButton>
      </Stack>
    </SportsPoolHeaderCard>
  );
};

const PodiumCard = ({
  tournamentPrediction,
  deadline,
  onClick,
}: PodiumCardProps) => {
  if (!tournamentPrediction.isOpen) {
    return null;
  }

  if (tournamentPrediction.prediction) {
    return (
      <PodiumPreviewCard
        tournamentPrediction={tournamentPrediction}
        deadline={deadline}
        onClick={onClick}
      />
    );
  }

  return (
    <PodiumEmptyCard
      deadline={deadline}
      onClick={onClick}
    />
  );
};

export default PodiumCard;