import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import styled from "styled-components";
const Inner = styled.div `
  z-index: 10000;
  position: absolute;
`;
const setDefaultPosition = (containerRef, innerRef) => {
    if (!containerRef.current || !innerRef.current)
        return;
    const { left, top, height, width } = containerRef.current.getBoundingClientRect();
    innerRef.current.style.left = `${left}px`;
    innerRef.current.style.top = `${top + height}px`;
    innerRef.current.style.width = `${width}px`;
};
const Portal = ({ children }) => {
    const containerRef = useRef(null);
    const innerRef = useRef(null);
    // const mousePos = useRef<{ x?: number; y?: number }>({});
    useEffect(() => {
        if (!children || !innerRef.current || !containerRef.current)
            return;
        setDefaultPosition(containerRef, innerRef);
    }, [children]);
    // imitate click on scroll to trigger click outside
    // useEffect(() => {
    //   const onMouseMove = (e: MouseEvent) => {
    //     if (typeof e.pageX === "undefined" || typeof e.pageY === "undefined")
    //       return;
    //     mousePos.current = { x: e.pageX, y: e.pageY };
    //   };
    //   const onScroll = () => {
    //     const { x, y } = mousePos.current;
    //     if (typeof x === "undefined" || typeof y === "undefined") return;
    //     // @ts-expect-error
    //     document.elementFromPoint(x, y)?.click();
    //   };
    //   document.addEventListener("mousemove", onMouseMove);
    //   document.addEventListener("scroll", onScroll, true);
    //   return () => {
    //     document.removeEventListener("scroll", onScroll);
    //     document.removeEventListener("mousemove", onMouseMove);
    //   };
    //   // eslint-disable-next-line react-hooks/exhaustive-deps
    // }, []);
    return (_jsx("div", { className: "portal__container", ref: containerRef, children: createPortal(_jsx(Inner, { className: "portal__inner", ref: innerRef, 
            // propagation from portal breaks click outside
            onClick: (e) => e.stopPropagation(), children: children }), document.body) }));
};
export default Portal;
//# sourceMappingURL=portal.js.map