import { lazy, Suspense } from 'react';

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

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

import { type CategoryItem } from '../../types';

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

type UseActivateCategoryModalProps = {
  category: CategoryItem;
};

const useActivateCategoryModal = () => {
  const { closeModal, ...result } = useModal(
    ({ category }: UseActivateCategoryModalProps) => (
      <Suspense
        fallback={
          <Skeleton
            width={600}
            height={236}
          />
        }
      >
        <ActivateCategoryModal
          onClose={closeModal}
          category={category}
        />
      </Suspense>
    ),
  );

  return {
    closeModal,
    ...result,
  };
};

export default useActivateCategoryModal;
