import { useCallback } from "react"
import confetti from "canvas-confetti"

export default function useConfetti() {
  var colors = [
    "var(--red-500)",
    "var(--blue-800)",
    "#e7fafa",
    "var(--blue-500)",
    "var(--green-500)",
    "var(--yellow-500)",
  ]
  const create = useCallback(() => {
    const count = 120
    const defaults = {
      origin: { y: 0.45, x: 0.5 },
      colors: colors,
      disableForReducedMotion: true,
    }

    function fire(particleRatio, opts) {
      confetti(
        Object.assign({}, defaults, opts, {
          particleCount: Math.floor(count * particleRatio),
        })
      )
    }

    fire(0.25, {
      spread: 26,
      startVelocity: 55,
    })
    fire(0.2, {
      spread: 60,
    })
    fire(0.35, {
      spread: 120,
      decay: 0.91,
      scalar: 0.8,
    })
    fire(0.1, {
      spread: 120,
      startVelocity: 25,
      decay: 0.92,
      scalar: 1.2,
    })
    fire(0.1, {
      spread: 80,
      startVelocity: 45,
      scalar: 1.3,
    })
  }, [])

  return create
}
