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

import { useArticleNavigation } from 'src/pages/dashboard/HuLibraries/hooks/useArticleNavigation';
import { useDeleteArticle } from 'src/pages/dashboard/HuLibraries/hooks/useDeleteArticle';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DeleteArticleModalProps = {
  article: Article;
  onClose: () => void;
  disableUnsavedWarning: () => void;
  resetUnsavedWarning: () => void;
};

const DeleteArticleModal = ({
  article,
  onClose,
  disableUnsavedWarning,
  resetUnsavedWarning,
}: DeleteArticleModalProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const { navigateBack } = useArticleNavigation();

  const deleteArticle = useDeleteArticle(article.parentId, {
    onMutate: disableUnsavedWarning,
    onSuccess: () => {
      navigateBack();
      onClose();
    },
    onError: () => {
      resetUnsavedWarning();
      onClose();
    },
  });

  const handleConfirm = () => deleteArticle.mutate(article);

  return (
    <Dialog
      onClose={onClose}
      title={t('article.delete.confirm.title')}
      textBody={t('article.delete.confirm.description')}
      primaryButtonProps={{
        loading: deleteArticle.isLoading,
        disabled: deleteArticle.isLoading,
        children: t('article.delete.title'),
        onClick: handleConfirm,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: deleteArticle.isLoading,
        onClick: onClose,
      }}
    />
  );
};

export default DeleteArticleModal;
