import { useRef } from 'react';

const PORTAL_CONTAINER_ID = 'react-portal';

export function usePortal(name: string) {
  const ref = useRef(getOrCreatePortal(name));
  return ref.current;
}

function getOrCreatePortal(name: string) {
  const portalContainer = document.getElementById(PORTAL_CONTAINER_ID) as HTMLDivElement;
  let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
  if (!existing) {
    const el: HTMLDivElement = document.createElement('div');
    el.setAttribute('data-portal-name', name);
    portalContainer.appendChild(el);
    existing = el;
  }
  return existing;
}