import { lazy } from 'react';

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

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

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

const DeactivateArticleModal = lazy(
  () => import('../components/DeactivateArticleModal'),
);

export const useArticleStatusActions = (article: Article) => {
  const { t } = useLokaliseTranslation('libraries');

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

  const { modal: deactivateModal, showModal: showDeactivateModal } =
    useLazyModal(DeactivateArticleModal);

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

  const isActive = article.status === ArticleStatus.ENABLED;
  const isInactive = article.status === ArticleStatus.DISABLED;

  const actions = [
    {
      when: isInactive,
      action: {
        key: 'activate-article',
        title: t('article.activate.title'),
        description: t('general:deactivate_anytime'),
        onClick: handleActivate,
        avatar: { Icon: IconBookmark },
      },
    },
    {
      when: isActive,
      action: {
        key: 'deactivate-article',
        title: t('article.deactivate.title'),
        description: t('general:activate_anytime'),
        onClick: handleDeactivate,
        avatar: { Icon: IconBookmark },
      },
    },
  ];

  return {
    actions,
    components: (
      <>
        {activateModal}
        {deactivateModal}
      </>
    ),
  };
};