import { lazy } from 'react';

import { useLazyModal } from '@material-hu/hooks/useLazyModal';

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

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

const ActivateArticleModal = lazy(() => import('./ActivateArticleModal'));

type ArticleInactiveAlertProps = {
  article: Article;
};

export const ArticleInactiveAlert = ({
  article,
}: ArticleInactiveAlertProps) => {
  const { t } = useLokaliseTranslation('libraries');

  const { modal: activateModal, showModal: showActivateModal } =
    useLazyModal(ActivateArticleModal);

  const showAlert = article.status === ArticleStatus.DISABLED;

  if (!showAlert) return null;

  const handleActivate = () => showActivateModal({ article });

  return (
    <>
      {activateModal}
      <Alert
        severity="info"
        title={t('article.alerts.inactive.with_segmentation.title')}
        description={t('article.alerts.inactive.with_segmentation.description')}
        action={{
          text: t('article.activate.title'),
          onClick: handleActivate,
        }}
      />
    </>
  );
};
