import React, { useContext, useId, useLayoutEffect } from "react";
import PortalContext from "./PortalContext";

interface PortalProps {
    children: React.ReactNode,
    name?: string
}
const Portal: React.FC<PortalProps> = ({ children, name }) => {
    const { addComponent, removeComponent } = useContext(PortalContext);
    const uniqueId = name ?? useId();
    // const uniqueId = useRef(name ?? `portal_${Math.random() * 50}`).current;

    // useEffect(() => {
    //     return () => removeComponent(uniqueId);
    // }, []);

    // useEffect(() => {
    //     addComponent({ name: uniqueId, component: children });
    // }, [children]);
    useLayoutEffect(() => {
        addComponent({
            name: uniqueId,
            component: children,
        });
        return () => removeComponent(uniqueId);
    }, [children, uniqueId]);

    return null;
}
export default Portal;