// https://css-tricks.com/playing-with-particles-using-the-web-animations-api/
(function () {
  const TextSelectionParticles = {
    supportsAnimate: !!document.body.animate,
    left: 0,
    right: 0,
    initialTopStart: null,

    init() {
      if (!this.supportsAnimate) return

      this.animateSelection = this.animateSelection.bind(this)
      this.resetTop = this.resetTop.bind(this)

      this.listen()
    },

    listen() {
      document.addEventListener('selectstart', this.resetTop)
      document.addEventListener('selectionchange', this.animateSelection)
    },

    resetTop() {
      this.initialTopStart = null
    },

    animateSelection() {
      const selection = window.getSelection()
      const range = selection.getRangeAt(0)
      const bounds = range.getClientRects()
      const initialBounds = bounds[0]
      const recentBounds = bounds[bounds.length - 1]

      if (!this.initialTopStart) {
        this.initialTopStart = initialBounds.top
      }

      const hasLeftChanged = this.left !== recentBounds.left
      const hasMovedDown = recentBounds.top > this.initialTopStart 
      const boundsToUse = hasMovedDown ? recentBounds : initialBounds

      this.left = boundsToUse.left
      this.right = boundsToUse.right

      const x = hasLeftChanged ? this.left : this.right
      const y = boundsToUse.y + boundsToUse.height

      createParticle(x, y)
    },
  }

  function createParticle(x, y) {
    const particle = document.createElement('particle')

    document.body.appendChild(particle)

    const size = Math.floor(Math.random() * 10 + 15)

    particle.style.width = `${size}px`
    particle.style.height = `${size / 5}px`
    particle.style.background = `hsl(${Math.random() * 60 + 180}, 70%, 60%)`

    const destinationX = x
    const destinationY = y + 10

    const animation = particle.animate([{
        transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px) rotate(0deg)`,
        opacity: 1
      },
      {
        transform: `translate(${destinationX}px, ${destinationY}px) rotate(-10deg)`,
        opacity: 0
      }
    ], {
      duration: 500 + Math.random() * 1000,
      easing: 'cubic-bezier(0, .9, .57, 1)',
      delay: Math.random() * 100
    })

    animation.addEventListener('finish', () => {
      particle.remove()
    }, { once: true })
  }

  TextSelectionParticles.init()
})()