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

type UseDeleteCategoryModalProps = {
  category: Omit<CategoryItem, 'id'> & { id?: number };
  onDelete?: () => void;
};

const useDeleteCategoryModal = () => {
  const { closeModal, ...result } = useModal(
    ({ category, onDelete }: UseDeleteCategoryModalProps) => (
      <Suspense
        fallback={
          <Skeleton
            width={600}
            height={260}
          />
        }
      >
        <DeleteCategoryModal
          category={category}
          onClose={closeModal}
          onDelete={onDelete}
        />
      </Suspense>
    ),
  );

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

export default useDeleteCategoryModal;
