import { Override, useAnimation } from "framer"
import { useCallback } from "react"

export function withClick(): Override {
    const animation = useAnimation()

    const handleClick = useCallback(async () => {
        // Animate the content to the right and out of view quickly
        await animation.start({
            x: "100%",
            transition: {
                duration: 0.1,
                ease: "easeIn",
                when: "beforeChildren",
            },
        })

        // Move the content to the left (out of view) instantly
        animation.set({ x: "-100%" })

        // Animate the content from the left back to its original position with a springy stop
        animation.start({
            x: "0%",
            transition: {
                type: "spring",
                stiffness: 200,
                damping: 20,
                when: "afterChildren",
            },
        })
    }, [animation])

    return {
        animate: animation,
        onClick: handleClick,
    }
}

export function withHover(): Override {
    const animation = useAnimation()

    const onMouseEnter = useCallback(async () => {
        // Animate the content to the right and out of view quickly
        await animation.start({
            x: "100%",
            transition: {
                duration: 0.1,
                ease: "easeIn",
                when: "beforeChildren",
            },
        })

        // Move the content to the left (out of view) instantly
        animation.set({ x: "-100%" })

        // Animate the content from the left back to its original position with a springy stop
        animation.start({
            x: "0%",
            transition: {
                type: "spring",
                stiffness: 200,
                damping: 20,
                when: "afterChildren",
            },
        })
    }, [animation])

    return {
        animate: animation,
        onMouseEnter: onMouseEnter,
    }
}