import { useNavigate } from 'react-router-dom';

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

import { useArticleId } from 'src/pages/dashboard/HuLibraries/hooks/useArticleId';
import { useDeleteArticle } from 'src/pages/dashboard/HuLibraries/hooks/useDeleteArticle';
import { librariesRoutes } from 'src/pages/dashboard/HuLibraries/routes';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { handleAction } from 'src/utils/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

const DeleteArticleModal = ({ article, onClose }: DeleteArticleModalProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const navigate = useNavigate();
  const { rootId } = useArticleId();

  const deleteArticle = useDeleteArticle(rootId);

  const onConfirmDeleteArticle = () => {
    deleteArticle.mutate(article, {
      onSuccess: () => {
        onClose();
        const parentId = article.parentId;
        if (!parentId || !rootId) {
          navigate(librariesRoutes.base());
          return;
        }
        navigate(librariesRoutes.article(rootId, parentId));
      },
    });
  };

  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: handleAction(onConfirmDeleteArticle),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: deleteArticle.isLoading,
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default DeleteArticleModal;