import {
    ComponentType,
    useState,
    useContext,
    createContext,
    useEffect,
} from "react"

// Create a context to share the close function
const OverlayContext = createContext(null)

export const withNestedOverlay = (Component): ComponentType => {
    return (props) => {
        const [isVisible, setIsVisible] = useState(true)

        useEffect(() => {
            if (isVisible) {
                document.body.style.overflow = "hidden"
            } else {
                document.body.style.overflow = ""
            }

            return () => {
                document.body.style.overflow = ""
            }
        }, [isVisible])

        const overlayStyle = {
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100vh",
            display: isVisible ? "flex" : "none",
            justifyContent: "center",
            alignItems: "center",
            zIndex: 9999, // Ensure it overlays other content
            backgroundColor: "rgba(0, 0, 0, 0.9)", // <---CHANGE BACKGROUND COLOR AND OPACITY
        }

        const handleOverlayClose = () => {
            setIsVisible(false)
        }

        const handleBackgroundClick = (e) => {
            if (e.target === e.currentTarget) {
                setIsVisible(false)
            }
        }

        return (
            <OverlayContext.Provider value={handleOverlayClose}>
                <div style={overlayStyle} onClick={handleBackgroundClick}>
                    <Component {...props} />
                </div>
            </OverlayContext.Provider>
        )
    }
}

export const CloseButton = (Component): ComponentType => {
    return (props) => {
        const handleOverlayClose = useContext(OverlayContext)

        const handleClick = () => {
            if (handleOverlayClose) {
                handleOverlayClose()
            }
        }

        return <Component {...props} onClick={handleClick} />
    }
}

// © F4Framer. All rights reserved.
// Visit https://f4.framer.website/