import { type MouseEvent } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import ProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';
import Title from '@material-hu/components/design-system/Title';

import defaultPathImg from 'src/assets/svg/defaultPathImg.svg';
import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useRoutes from '../../../hooks/useRoutes';
import { type PathListItem } from '../../types';

export type PathCardProps = {
  path: PathListItem;
};

const PathCard = ({ path }: PathCardProps) => {
  const location = useLocation();
  const navigate = useNavigate();
  const routes = useRoutes();
  const { t } = useLokaliseTranslation('learning');
  const { formatDate } = useFormatDate();
  const { shadows } = useTheme();

  const handleClick = (event?: MouseEvent) => {
    event?.stopPropagation();
    navigate(routes.paths.detail(path.id), {
      state: { searchParams: location.search },
    });
  };

  const obligatoryString = path.isObligatory
    ? t('path.required.title')
    : t('path.optional');
  const dueDateString =
    path.dueDate && t('common.due_date', { date: formatDate(path.dueDate) });

  const copetin = [obligatoryString, dueDateString]
    .filter(str => !!str)
    .join(' - ');

  return (
    <CardContainer
      img={path.pictureUrl ?? defaultPathImg}
      onClick={handleClick}
      fullWidth
      noHover
      footer={{
        text: t('course.count', { count: path.coursesAmount }),
        action1: {
          onClick: handleClick,
          title: t('path.view'),
        },
      }}
      sx={{
        '&:hover, :focus-visible': {
          boxShadow: shadows[1],
        },
      }}
    >
      <Stack sx={{ gap: 2 }}>
        <Title
          variant="S"
          copetin={copetin}
          title={path.title}
          overflow="tooltip"
          withEllipsis
        />
        <ProgressBar
          variant="determinate"
          current={path.progress}
          hasPercentage
        />
      </Stack>
    </CardContainer>
  );
};

export default PathCard;
