import { useNavigate } from 'react-router-dom';

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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';

import bannerProde from 'src/assets/images/banner-prode.webp';
import { type Competition } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  footerBadgeSx,
  footerBadgeTextSx,
  getStaggerAnimationSx,
} from '../constants';
import useSportsPoolRoutes from '../hooks/useSportsPoolRoutes';
import { postWebViewRouteChange } from '../utils';

type CompetitionCardProps = {
  competition: Competition;
  index?: number;
};

const CompetitionCard = ({ competition, index = 0 }: CompetitionCardProps) => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('sportsPool');
  const routes = useSportsPoolRoutes();

  const handleClick = () => {
    postWebViewRouteChange(`/${competition.id}`);
    navigate(routes.competition(competition.id));
  };

  const getStatusText = () => {
    const { status, startDate, endDate } = competition;

    if (status === 'SCHEDULED' && startDate) {
      const daysUntilStart = Math.ceil(
        (new Date(startDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
      );
      if (daysUntilStart >= 0) {
        const key =
          daysUntilStart === 1
            ? 'competition.starts_in_days'
            : 'competition.starts_in_days_plural';
        return t(key, { count: daysUntilStart });
      }
    }

    if (status === 'ACTIVE') {
      if (endDate) {
        const daysUntilEnd = Math.ceil(
          (new Date(endDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
        );
        if (daysUntilEnd >= 0) {
          const key =
            daysUntilEnd === 1
              ? 'competition.ends_in_days'
              : 'competition.ends_in_days_plural';
          return t(key, { count: daysUntilEnd });
        }
      }
      return t('competition.status.active');
    }

    if (status === 'FINISHED') {
      return t('competition.status.finished');
    }

    return null;
  };

  const statusText = getStatusText();

  return (
    <CardContainer
      fullWidth
      padding={0}
      onClick={handleClick}
      sx={getStaggerAnimationSx(index)}
    >
      <Box
        component="img"
        alt={competition.name}
        src={competition.coverImageUrl ?? bannerProde}
        sx={{
          width: '100%',
          height: 82,
          objectFit: 'cover',
          borderRadius: '12px 12px 0 0',
          display: 'block',
        }}
      />
      <ListItem
        text={{ title: competition.name }}
        action={{ Icon: IconChevronRight, onClick: handleClick }}
      />
      {statusText && (
        <Box sx={footerBadgeSx}>
          <Typography
            variant="globalXXS"
            sx={footerBadgeTextSx}
          >
            {statusText}
          </Typography>
        </Box>
      )}
    </CardContainer>
  );
};

export default CompetitionCard;