import type { ComponentType } from "react"
import confetti from "canvas-confetti"

const defaults = {
    spread: 360,
    ticks: 100,
    gravity: 0,
    decay: 0.94,
    startVelocity: 30,
}

function shoot(x: number, y: number) {
    confetti({
        ...defaults,
        particleCount: 30,
        scalar: 1.2,
        shapes: ["circle", "square"],
        colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
        origin: { x: x / window.innerWidth, y: y / window.innerHeight },
    })

    confetti({
        ...defaults,
        particleCount: 20,
        scalar: 2,
        shapes: ["text"],
        shapeOptions: {
            text: {
                value: ["🦄", "🌈"],
            },
        },
        origin: { x: x / window.innerWidth, y: y / window.innerHeight },
    })
}

export function withClick(Component): ComponentType {
    return (props) => {
        const handleClick = (event) => {
            const { clientX, clientY } = event
            shoot(clientX, clientY)
            setTimeout(() => shoot(clientX, clientY), 100)
            setTimeout(() => shoot(clientX, clientY), 200)
        }

        return (
            <Component {...props} onClick={handleClick}>
                {props.children}
            </Component>
        )
    }
}
export function withHover(Component): ComponentType {
    return (props) => {
        const handleHover = (event) => {
            const { clientX, clientY } = event
            shoot(clientX, clientY)
            setTimeout(() => shoot(clientX, clientY), 100)
            setTimeout(() => shoot(clientX, clientY), 200)
        }

        return (
            <Component {...props} onMouseEnter={handleHover}>
                {props.children}
            </Component>
        )
    }
}