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 DeactivateCategoryModal = lazy(() => import('./DeactivateCategoryModal'));

type UseDeactivateCategoryModalProps = {
  category: CategoryItem;
  onDeactivate?: () => void;
};

const useDeactivateCategoryModal = () => {
  const { closeModal, ...result } = useModal(
    ({ category, onDeactivate }: UseDeactivateCategoryModalProps) => (
      <Suspense
        fallback={
          <Skeleton
            width={600}
            height={236}
          />
        }
      >
        <DeactivateCategoryModal
          category={category}
          onClose={closeModal}
          onDeactivate={onDeactivate}
        />
      </Suspense>
    ),
  );

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

export default useDeactivateCategoryModal;
