import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import Toast from "react-native-toast-message";
import { toastConfig } from "./toast-config";
/**
 * Web toast portal — mounts `Toast` into a div appended directly to
 * `document.body` so it renders above React Native Web's `Modal`
 * portals (which also target body).
 *
 * The container div uses `pointer-events:none` so the transparent
 * overlay never intercepts clicks. HTML `pointer-events` does NOT
 * inherit to children (unlike SVG), so the visible toast pill itself
 * remains fully interactive via its own event handlers.
 */
export function ToastPortal() {
    const containerRef = useRef(null);
    if (!containerRef.current) {
        const div = document.createElement("div");
        div.style.cssText =
            "position:fixed;top:0;bottom:0;right:0;left:var(--sidebar-width,0px);z-index:999999;pointer-events:none;";
        containerRef.current = div;
    }
    useEffect(() => {
        const container = containerRef.current;
        if (!container) {
            return;
        }
        document.body.appendChild(container);
        return () => {
            document.body.removeChild(container);
        };
    }, []);
    if (!containerRef.current) {
        return null;
    }
    return createPortal(<Toast config={toastConfig} position="top" visibilityTime={3000} topOffset={50}/>, containerRef.current);
}
export default ToastPortal;
//# sourceMappingURL=ToastPortal.web.jsx.map