import { useState, useEffect } from 'react';

export const useCreateElementPretendBody = (name: string, element?: HTMLElement) => {
    const [loaded, setLoaded] = useState(false);
    const [portalId] = useState(name);

    useEffect(() => {
        const div = document.createElement('div');
        div.id = portalId;
        const elementToPrepend = element || document.getElementsByTagName('body')[0];
        if (!elementToPrepend)
            throw new Error(
                "To use useCreateElementPretendBody use 'main' html tag in your app or provide element to this hook as a second argument.",
            );
        elementToPrepend.prepend(div);
        setLoaded(true);
        return () => {
            elementToPrepend.removeChild(div);
        };
    }, [portalId]);

    return { loaded, portalId };
};