import { IconChevronRight } from '@material-hu/icons/tabler';
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 { type Match, type MatchInPrediction } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getMatchLocalDate, getMatchLocalTime } from '../utils';
import SportsPoolHeaderCard from './SportsPoolHeaderCard';
import TeamFlag from './TeamFlag';

type PendingPredictionCardProps = {
  match: Match | MatchInPrediction;
  onClick?: () => void;
};

const PendingPredictionCard = ({
  match,
  onClick,
}: PendingPredictionCardProps) => {
  const { t, i18n } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();

  const formatDate = () => {
    const localDate = getMatchLocalDate(match.matchDate, match.matchTime);
    const date = new Date(`${localDate}T12:00:00`);
    return date.toLocaleDateString(i18n.language, {
      weekday: 'long',
      day: '2-digit',
      month: '2-digit',
    });
  };

  return (
    <SportsPoolHeaderCard
      onClick={onClick}
      actionAreaSx={{
        '> .MuiCardContent-root': {
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
        },
      }}
      badge={{ label: t('pending_prediction.complete'), type: 'warning' }}
    >
      <Stack
        id="pending-prediction-card-content"
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingX: {
            xs: 2,
            md: 3,
          },
          paddingY: {
            xs: 2,
          },
        }}
      >
        {/* .Content - Left side with title */}
        <Stack id="pending-prediction-card-content-left">
          {/* Copetín */}
          <Typography
            variant="globalXXS"
            sx={{ color: theme.palette.new.text.neutral.lighter }}
          >
            {t('pending_prediction.title')}
          </Typography>
          {/* Title with flags */}
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 0.5,
              flexWrap: 'nowrap',
              overflow: 'hidden',
            }}
          >
            {match.homeTeam && (
              <TeamFlag
                countryCode={match.homeTeam.countryCode}
                flagUrl={match.homeTeam.flagUrl}
                name={match.homeTeam.name}
                emoji={match.homeTeam.emoji}
                size={18}
              />
            )}
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
              noWrap
            >
              {match.homeTeam?.shortName ||
                match.homeTeam?.name ||
                match.homeTeamPlaceholder ||
                t('matches.tbd')}{' '}
              {t('matches.vs')}{' '}
              {match.awayTeam?.shortName ||
                match.awayTeam?.name ||
                match.awayTeamPlaceholder ||
                t('matches.tbd')}
            </Typography>
            {match.awayTeam && (
              <TeamFlag
                countryCode={match.awayTeam.countryCode}
                flagUrl={match.awayTeam.flagUrl}
                name={match.awayTeam.name}
                emoji={match.awayTeam.emoji}
                size={18}
              />
            )}
          </Stack>
        </Stack>

        <Stack
          sx={{
            alignItems: 'flex-end',
            display: 'flex',
            flexDirection: 'row',
            gap: 1,
          }}
        >
          {/* .SideContent - Date and time */}
          <Stack
            sx={{
              alignItems: 'flex-end',
              flexShrink: 0,
              gap: 0,
            }}
          >
            {/* Side copetin - Date */}
            <Typography
              variant="globalXXS"
              sx={{
                color: theme.palette.new.text.neutral.lighter,
                textAlign: 'right',
                whiteSpace: 'nowrap',
              }}
            >
              {formatDate()}
            </Typography>
            {/* Side text - Time */}
            <Typography
              variant="globalXS"
              sx={{ textAlign: 'right' }}
            >
              {getMatchLocalTime(match.matchDate, match.matchTime)}
            </Typography>
          </Stack>

          <IconButton sx={{ width: 40, height: 40 }}>
            <IconChevronRight
              size={24}
              color={theme.palette.new.text.neutral.default}
            />
          </IconButton>
        </Stack>
      </Stack>
    </SportsPoolHeaderCard>
  );
};

export default PendingPredictionCard;