import { Contants } from "@/lib/contants";
import { useState, useEffect } from "react";

/**
 * Hook trả về container để mount portal vào Shadow DOM.
 * @param containerId id của element gốc Shadow DOM
 */
export function useShadowPortal(containerId: string = Contants.ID_EXTENSION) {
  const [portalContainer, setPortalContainer] = useState<
    HTMLElement | ShadowRoot | null
  >(null);

  useEffect(() => {
    const el = document.getElementById(containerId);
    if (el?.shadowRoot) {
      setPortalContainer(el.shadowRoot);
    } else {
      setPortalContainer(document.body); // fallback
    }
  }, [containerId]);

  return portalContainer;
}
