import { Trans } from 'react-i18next';

import Typography from '@material-hu/mui/Typography';

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

import { useArticleId } from 'src/pages/dashboard/HuLibraries/hooks/useArticleId';
import { useUpdateArticleStatus } from 'src/pages/dashboard/HuLibraries/hooks/useUpdateArticleStatus';
import {
  type Article,
  ArticleStatus,
} from 'src/pages/dashboard/HuLibraries/types';
import { articleHasChildren } from 'src/pages/dashboard/HuLibraries/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

const DeactivateArticleModal = ({
  article,
  onClose,
}: DeactivateArticleModalProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const { rootId } = useArticleId();

  const updateArticleStatus = useUpdateArticleStatus();

  const handleConfirm = () => {
    updateArticleStatus.mutate(
      { article, rootId, status: ArticleStatus.DISABLED },
      { onSuccess: onClose },
    );
  };

  return (
    <Dialog
      onClose={onClose}
      title={t('article.deactivate.confirm.title')}
      body={
        <Typography variant="globalS">
          <Trans
            i18nKey={
              articleHasChildren(article)
                ? t('article.deactivate.confirm.description_with_children')
                : t('article.deactivate.confirm.description')
            }
            components={{ br: <br /> }}
          />
        </Typography>
      }
      primaryButtonProps={{
        loading: updateArticleStatus.isLoading,
        disabled: updateArticleStatus.isLoading,
        children: t('article.deactivate.title'),
        onClick: handleConfirm,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: updateArticleStatus.isLoading,
        onClick: onClose,
      }}
    />
  );
};

export default DeactivateArticleModal;
