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(): React.JSX.Element | null {
  const containerRef = useRef<HTMLDivElement | null>(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;