import { type MouseEvent } from 'react';

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

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

import useEditCourseStatus from '../../../hooks/useEditCourseStatus';
import { type CourseListItem, CourseStatus } from '../../../types';

type DeactivateCourseModalProps = {
  onClose: () => void;
  course: CourseListItem;
};

const DeactivateCourseModal = ({
  onClose,
  course,
}: DeactivateCourseModalProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { mutate: updateCourseStatus, isLoading } = useEditCourseStatus(course);

  const handleDeactivate = () =>
    updateCourseStatus(
      {
        status: CourseStatus.INACTIVE,
        sendNotification: false,
      },
      { onSettled: onClose },
    );

  const handleAction =
    (callback: Function) => (event: MouseEvent<HTMLButtonElement>) => {
      event.stopPropagation();
      callback();
    };

  return (
    <Dialog
      onClose={onClose}
      title={t('courses.inactivate_modal.title', { name: course.title })}
      textBody={t('courses.inactivate_modal.description')}
      primaryButtonProps={{
        loading: isLoading,
        disabled: isLoading,
        children: t('general:deactivate'),
        onClick: handleAction(handleDeactivate),
      }}
      secondaryButtonProps={{
        disabled: isLoading,
        children: t('general:cancel'),
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default DeactivateCourseModal;
