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

import ProgressCircle from '@material-hu/components/composed-components/ProgressCircle';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { RIGHT_DETAILS_WIDTH } from '../../constants';
import { type Path } from '../../types';
import { getFinishedPathCoursesAmount, showCertificate } from '../../utils';

import PathCertificate from './PathCertificate';

export type PathProgressProps = {
  path: Path;
};

const PathProgress = ({ path }: PathProgressProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { spacing } = useTheme();

  const finishedCourses = getFinishedPathCoursesAmount(path.courses);
  const totalCourses = path.courses.length;

  return (
    <CardContainer
      sx={{
        minWidth: RIGHT_DETAILS_WIDTH,
        width: RIGHT_DETAILS_WIDTH,
        mt: `calc(${spacing(1.5)} + 25.2px)`,
      }}
    >
      <ProgressCircle
        copetin={t('common.progress').toUpperCase()}
        title={t('path.courses.finished')}
        description={`${finishedCourses}/${totalCourses}`}
        current={path.progress}
      />
      {showCertificate(path) && <PathCertificate path={path} />}
    </CardContainer>
  );
};

export default PathProgress;