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

import { useDeletePath } from 'src/pages/dashboard/Learning/Paths/hooks/useDeletePath';
import { useLokaliseTranslation } from 'src/utils/i18n';

type DeletePathModalProps = {
  onClose: () => void;
  pathId: number;
};

const DeletePathModal = ({ onClose, pathId }: DeletePathModalProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { mutate: deletePath, isLoading } = useDeletePath();

  const handleDelete = () => deletePath(pathId, { onSettled: onClose });

  return (
    <HuDialog
      onClose={onClose}
      title={t('path.delete.title')}
      textBody={t('path.delete.description')}
      primaryButtonProps={{
        children: t('general:delete'),
        loading: isLoading,
        disabled: isLoading,
        onClick: e => {
          e.stopPropagation();
          handleDelete();
        },
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: isLoading,
        onClick: e => {
          e.stopPropagation();
          onClose();
        },
      }}
    />
  );
};

export default DeletePathModal;
