import { Trans } from 'react-i18next';

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

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

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

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

const DisabledArticleModal = ({
  article,
  onClose,
}: DisabledArticleModalProps) => {
  const { t } = useLokaliseTranslation('libraries');

  const updateArticleStatus = useUpdateArticleStatus({ article });

  const handleConfirmDisableArticle = () => {
    const payload: UpdateArticleStatusPayload = {
      status: ArticleStatus.DISABLED,
      sendNotification: article.notify,
      notificationType: article.notificationType,
    };

    updateArticleStatus.mutate(payload, { onSuccess: () => onClose() });
  };

  const hasChildren = (article.children?.length ?? 0) > 0;

  return (
    <Dialog
      onClose={onClose}
      title={t('article.deactivate.confirm.title')}
      body={
        <Typography variant="globalS">
          <Trans
            i18nKey={
              hasChildren
                ? 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: handleAction(handleConfirmDisableArticle),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: updateArticleStatus.isLoading,
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default DisabledArticleModal;