import React, { useEffect } from "react"
import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({
    isVisible: false,
    hasBeenShown: false, // Add a flag to track if the frame has been shown
})

export const withAttemptedEscape = (Component): ComponentType => {
    return (props) => {
        const [store, setStore] = useStore()

        useEffect(() => {
            const handleMouseOut = (event) => {
                if (
                    !event.relatedTarget &&
                    !event.toElement &&
                    !store.hasBeenShown
                ) {
                    setStore({ isVisible: true, hasBeenShown: true }) // Update the flag when shown
                }
            }

            document.addEventListener("mouseout", handleMouseOut)

            return () => {
                document.removeEventListener("mouseout", handleMouseOut)
            }
        }, [store, setStore]) // Add store to the dependency array

        return (
            <Component
                {...props}
                style={{
                    ...props.style,
                    display: store.isVisible ? "block" : "none",
                }}
            />
        )
    }
}

export const withHide = (Component): ComponentType => {
    return (props) => {
        const [store, setStore] = useStore()

        const onClick = () => {
            // Hide the frame on click
            setStore({ isVisible: false })
        }

        return (
            <Component
                {...props}
                onClick={onClick}
                style={{
                    ...props.style,
                    display: store.isVisible ? "block" : "none",
                }}
            />
        )
    }
}