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

import useStartCourse from 'src/pages/dashboard/learning/courses/hooks/useStartCourse';
import { showCertificate } from 'src/pages/dashboard/learning/courses/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { type Course, CourseStatus } from '../../../types';

const { PENDING_SIGNATURE, FINISHED, IN_PROGRESS, PENDING, ALL } = CourseStatus;

const CourseStartButton = ({ course }: { course: Course }) => {
  const { t } = useLokaliseTranslation(['learning', 'general']);
  const { handleStartCourse, startCourseMutation } = useStartCourse(course);

  const buttonText = {
    [PENDING_SIGNATURE]: t('course.signature.sign_now'),
    [FINISHED]: t('course.view'),
    [IN_PROGRESS]: t('general:continue'),
    [PENDING]: t('general:actions.start'),
    [ALL]: t('general:actions.start'),
  }[course.status];

  const buttonVariant = showCertificate(course) ? 'secondary' : 'primary';

  return (
    <Button
      variant={buttonVariant}
      sx={{ width: 'fit-content', mt: 1 }}
      loading={startCourseMutation.isLoading}
      disabled={startCourseMutation.isLoading}
      onClick={() => handleStartCourse()}
    >
      {buttonText}
    </Button>
  );
};
export default CourseStartButton;
