import * as React from "react"
import { Override } from "framer"
import { useAnimation, motion } from "framer-motion"

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

    const handleClick = async () => {
        await controls.start({
            opacity: [1, 0],
            scale: [1, 1.3],
            borderWidth: ["0px", "10px"],
            borderColor: [
                "rgba(135, 135, 135, 0.17)",
                "rgba(135, 135, 135, 0.17)",
            ],
            transition: {
                duration: 0.4,
                ease: "easeOut",
            },
        })

        controls.set({
            scale: 1,
            borderWidth: "0px",
            borderColor: "transparent",
        })

        await controls.start({
            opacity: 1,
            transition: {
                duration: 0.6,
                ease: "easeInOut",
            },
        })
    }

    return {
        as: motion.div,
        style: {
            borderStyle: "solid",
            transformOrigin: "center",
        },
        initial: {
            borderWidth: "0px",
            borderColor: "transparent",
        },
        animate: controls,
        onTap: handleClick,
    }
}

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

    const handleMouseEnter = async () => {
        await controls.start({
            opacity: [1, 0],
            scale: [1, 1.3],
            borderWidth: ["0px", "10px"],
            borderColor: [
                "rgba(135, 135, 135, 0.17)",
                "rgba(135, 135, 135, 0.17)",
            ],
            transition: {
                duration: 0.4,
                ease: "easeOut",
            },
        })

        controls.set({
            scale: 1,
            borderWidth: "0px",
            borderColor: "transparent",
        })

        await controls.start({
            opacity: 1,
            transition: {
                duration: 0.6,
                ease: "easeInOut",
            },
        })
    }

    return {
        as: motion.div,
        style: {
            borderStyle: "solid",
            transformOrigin: "center",
        },
        initial: {
            borderWidth: "0px",
            borderColor: "transparent",
        },
        animate: controls,
        onHoverStart: handleMouseEnter, // Updated here
    }
}