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

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

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

export type PathCourseWarningProps = {
  onClose: () => void;
  isDelete?: boolean;
  learningPaths: Pick<Path, 'id' | 'title'>[];
};

const PathCourseWarning = ({
  onClose,
  isDelete,
  learningPaths,
}: PathCourseWarningProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Dialog
      onClose={onClose}
      title={t('courses.course_on_path.title', {
        action: isDelete
          ? t('general:deleted').toLowerCase()
          : t('general:deactivated').toLowerCase(),
      })}
      body={
        <Stack sx={{ gap: 2 }}>
          <Typography>
            {t('courses.course_on_path.description', {
              count: learningPaths.length,
            })}
          </Typography>
          <Stack
            component="ul"
            sx={{ gap: 1, overflow: 'auto', maxHeight: '150px' }}
          >
            {learningPaths.map(learningPath => (
              <Typography
                key={learningPath.id}
                component="li"
                fontWeight="fontWeightSemiBold"
                sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
              >
                • {learningPath.title}
              </Typography>
            ))}
          </Stack>
          <Typography>
            {t('courses.course_on_path.footer', {
              action: isDelete
                ? t('general:delete_it').toLowerCase()
                : t('general:deactivate_it').toLowerCase(),
            })}
          </Typography>
        </Stack>
      }
      primaryButtonProps={{
        children: t('general:understood'),
        onClick: onClose,
      }}
    />
  );
};

export default PathCourseWarning;
