import { NotiBar } from './noti-bar';
import { SnackBar } from './snack-bar';
import { createPortal } from 'react-dom';
import { 
  useEffect, 
  useState 
} from 'react';

export const Toasts = () => {
  const [toastPortalRoot, setToastPortalRoot] = useState<HTMLDivElement>();

  useEffect(() => {
    const portalRoot = document.createElement('div');
    portalRoot.id = 'toast-portal-root';
    document.body.appendChild(portalRoot);
    setToastPortalRoot(portalRoot);

    return () => {
      document.body.removeChild(portalRoot);
    };
  }, []);

  if (!toastPortalRoot) return null;

  return (
    <>
      { createPortal(<NotiBar />, toastPortalRoot) }
      { createPortal(<SnackBar />, toastPortalRoot) }
    </>
  );
};
