import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import Pills from '@material-hu/components/design-system/Pills';
import Title from '@material-hu/components/design-system/Title';

import { getDurationTime } from 'src/pages/dashboard/Learning/common/utils';
import { type PathCourse } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CoursesListFooterProps = { courses: PathCourse[] };

export const CoursesListFooter = ({ courses }: CoursesListFooterProps) => {
  const { t } = useLokaliseTranslation('learning');

  const pathDuration = courses.reduce(
    (acc, { durationTime }) => {
      const minutes = acc.minutes + (durationTime?.minutes ?? 0);
      return {
        hours:
          acc.hours + (durationTime?.hours ?? 0) + Math.floor(minutes / 60),
        minutes: minutes % 60,
      };
    },
    { hours: 0, minutes: 0 },
  );

  const durationLabel = `${t('common.duration_title')}: ${getDurationTime(t, pathDuration, true)}`;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <Title
        variant="S"
        title={t('course.total', { count: courses.length })}
        sx={{ textWrap: 'nowrap', mr: 1 }}
      />
      <Divider
        orientation="horizontal"
        sx={{ flex: 1 }}
      />
      <Pills
        type="neutral"
        hasIcon={false}
        label={durationLabel}
      />
    </Stack>
  );
};
