import { useEffect, useMemo } from 'react';
import { getPortalProviderAPI } from './common';
import { createPortalRendererComponent } from './createPortalRendererComponent';
import { PortalManager } from './PortalManager';
/**
 * Initializes PortalManager and creates PortalRendererComponent. Offers an API (portalProviderAPI) for managing portals.
 * @returns {[PortalProviderAPI, PortalRendererComponent]} An array containing two elements:
 *         1. portalProviderAPI: An object providing an API for rendering and removing portals.
 *         2. PortalRenderer: A React component responsible for rendering the portal content.
 */
export function usePortalProvider() {
  var portalManager = useMemo(function () {
    return new PortalManager();
  }, []);
  var PortalRenderer = useMemo(function () {
    return createPortalRendererComponent(portalManager);
  }, [portalManager]);
  var portalProviderAPI = useMemo(function () {
    return getPortalProviderAPI(portalManager);
  }, [portalManager]);

  // Cleanup on unmount
  useEffect(function () {
    return function () {
      portalProviderAPI.destroy();
    };
  }, [portalManager, portalProviderAPI]);
  return [portalProviderAPI, PortalRenderer];
}