/*
  Selectors to elements which we want to show the celebration animation when clicked.
*/
const triggerSelectors = [
  '.ComboInput-option-favorite-icon',
  '.LinkCarousel-item-favorite.is-unstarred',
]

const TRIGGER_SELECTOR = triggerSelectors.join(', ')

const init = () => {
  let runningTimerId: number | null = null
  const animationDuration = 2000 // in millis.
  const svg = `<svg id="ejX6QuT4CUp1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" shape-rendering="optimizeSpeed" text-rendering="optimizeSpeed" width="300" height="300" style="will-change: transform; transform: translateZ(0);">
<style><![CDATA[
#ejX6QuT4CUp2_to {animation: ejX6QuT4CUp2_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 37.5% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp2_ts {animation: ejX6QuT4CUp2_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_ts__ts { 0% {transform: scale(-0.966656,0.966656);animation-timing-function: cubic-bezier(0,0,0.58,1)} 25% {transform: scale(-2.192693,2.192693);animation-timing-function: cubic-bezier(0,0,0.58,1)} 37.5% {transform: scale(-1.551673,1.551673)} 100% {transform: scale(-1.551673,1.551673)}} #ejX6QuT4CUp2 {animation: ejX6QuT4CUp2_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 37.5% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp3_to {animation: ejX6QuT4CUp3_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp3_tr {animation: ejX6QuT4CUp3_tr__tr ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_tr__tr { 0% {transform: rotate(0deg);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {transform: rotate(305.83deg)} 100% {transform: rotate(305.83deg)}} #ejX6QuT4CUp3_ts {animation: ejX6QuT4CUp3_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_ts__ts { 0% {transform: scale(0.43962,0.43962)} 37.5% {transform: scale(1,1)} 100% {transform: scale(1,1)}} #ejX6QuT4CUp3 {animation: ejX6QuT4CUp3_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_c_o { 0% {opacity: 1} 37.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp4_to {animation: ejX6QuT4CUp4_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp4_tr {animation: ejX6QuT4CUp4_tr__tr ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_tr__tr { 0% {transform: rotate(0deg);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 37.5% {transform: rotate(-414.17deg)} 100% {transform: rotate(-414.17deg)}} #ejX6QuT4CUp4_ts {animation: ejX6QuT4CUp4_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_ts__ts { 0% {transform: scale(0.43962,0.43962)} 36.25% {transform: scale(0.75,0.75)} 50% {transform: scale(1,1)} 100% {transform: scale(1,1)}} #ejX6QuT4CUp4 {animation: ejX6QuT4CUp4_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp5_to {animation: ejX6QuT4CUp5_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp5_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp5 {animation: ejX6QuT4CUp5_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp5_c_o { 0% {opacity: 1} 37.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp6_to {animation: ejX6QuT4CUp6_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp6_to__to { 0% {transform: translate(150px,150px);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 25% {transform: translate(200px,170px)} 100% {transform: translate(200px,170px)}} #ejX6QuT4CUp6 {animation: ejX6QuT4CUp6_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp6_c_o { 0% {opacity: 1} 12.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 25% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp7_to {animation: ejX6QuT4CUp7_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp7_to__to { 0% {transform: translate(150px,150px);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {transform: translate(210px,100px)} 100% {transform: translate(210px,100px)}} #ejX6QuT4CUp7 {animation: ejX6QuT4CUp7_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp7_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp8_ts {animation: ejX6QuT4CUp8_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp8_ts__ts { 0% {transform: translate(150px,150px) scale(0.2,0.2);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 16.25% {transform: translate(150px,150px) scale(4,4)} 100% {transform: translate(150px,150px) scale(4,4)}} #ejX6QuT4CUp8 {animation-name: ejX6QuT4CUp8_c_o, ejX6QuT4CUp8_f_p;animation-duration: ${animationDuration}ms;animation-fill-mode: forwards;animation-timing-function: linear;animation-direction: normal;animation-iteration-count: 1;}@keyframes ejX6QuT4CUp8_c_o { 0% {opacity: 0.75} 21.25% {opacity: 0} 100% {opacity: 0}}@keyframes ejX6QuT4CUp8_f_p { 0% {fill: #ffcba0} 11.25% {fill: #fdf900} 20% {fill: #fafafa} 100% {fill: #fafafa}} #ejX6QuT4CUp9_to {animation: ejX6QuT4CUp9_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp9_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp9 {animation: ejX6QuT4CUp9_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp9_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp10_to {animation: ejX6QuT4CUp10_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp10_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp10 {animation: ejX6QuT4CUp10_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp10_c_o { 0% {opacity: 1} 25% {opacity: 1} 50% {opacity: 0} 100% {opacity: 0}}
]]></style>
<g id="ejX6QuT4CUp2_to" style="offset-path:path('M150,150C151.487307,98.723346,98.424658,83.160356,84.036214,131.511063');offset-rotate:0deg"><g id="ejX6QuT4CUp2_ts" transform="scale(-0.966656,0.966656)"><ellipse id="ejX6QuT4CUp2" rx="4.445235" ry="4.445235" transform="translate(0,0)" fill="none" stroke="#ed0606" stroke-width="2"/></g></g><g id="ejX6QuT4CUp3_to" style="offset-path:path('M150,150C170.853084,85.497808,215.912715,88.678086,240,150');offset-rotate:0deg"><g id="ejX6QuT4CUp3_tr" transform="rotate(0)"><g id="ejX6QuT4CUp3_ts" transform="scale(0.43962,0.43962)"><ellipse id="ejX6QuT4CUp3" rx="10.645289" ry="10.645289" transform="translate(0,0)" fill="none" stroke="#670bf4" stroke-width="6" stroke-dashoffset="280" stroke-dasharray="3"/></g></g></g><g id="ejX6QuT4CUp4_to" style="offset-path:path('M150,150C111.631802,121.393491,76.521788,145.563306,76,198');offset-rotate:0deg"><g id="ejX6QuT4CUp4_tr" transform="rotate(0)"><g id="ejX6QuT4CUp4_ts" transform="scale(0.43962,0.43962)"><ellipse id="ejX6QuT4CUp4" rx="10.645289" ry="10.645289" transform="translate(0,0)" fill="none" stroke="#1f0bf4" stroke-width="6" stroke-miterlimit="13" stroke-dashoffset="45" stroke-dasharray="8"/></g></g></g><g id="ejX6QuT4CUp5_to" style="offset-path:path('M150,150C159.106533,163.173822,180.909148,207.870275,179.358177,213.36311');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp5" rx="30" ry="30" transform="scale(0.155996,0.155996) translate(0,0)" fill="#fff400" stroke-width="0"/></g><g id="ejX6QuT4CUp6_to" transform="translate(150,150)"><ellipse id="ejX6QuT4CUp6" rx="30" ry="30" transform="scale(0.094146,0.094146) translate(0,0)" fill="#fc0" stroke-width="0"/></g><g id="ejX6QuT4CUp7_to" transform="translate(150,150)"><ellipse id="ejX6QuT4CUp7" rx="30" ry="30" transform="scale(0.069628,0.069628) translate(0,0)" fill="#fc0" stroke-width="0"/></g><g id="ejX6QuT4CUp8_ts" transform="translate(150,150) scale(0.2,0.2)"><ellipse id="ejX6QuT4CUp8" style="mix-blend-mode:multiply" rx="7.86004" ry="7.86004" transform="translate(0,0)" opacity="0.75" fill="#ffcba0" stroke-width="0"/></g><g id="ejX6QuT4CUp9_to" style="offset-path:path('M150,150C137.037773,122.096076,120.091659,81.569132,106,74');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp9" rx="30" ry="30" transform="scale(0.069628,0.069628) translate(0,0)" fill="#5800ff" stroke-width="0"/></g><g id="ejX6QuT4CUp10_to" style="offset-path:path('M152,153C128.044643,113.553169,69.737409,121.442089,39.459312,122.665002');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp10" rx="30" ry="30" transform="scale(0.04,0.04) translate(0,0)" fill="#ff2100" stroke-width="0"/></g></svg>
`
  document.body.addEventListener(
    'pointerdown',
    (evt: PointerEvent) => {
      // Only celebrate when a whitelisted element is clicked.
      if (!evt.target || !(evt.target instanceof HTMLElement)) {
        return
      }

      if (!evt.target.matches(TRIGGER_SELECTOR)) {
        return
      }

      // Cleanup any existing timer.
      if (runningTimerId !== null) {
        clearTimeout(runningTimerId)
        runningTimerId = null
      }

      // Create the celebration host element.
      let wrapper = window.btuCelebrate
      if (!wrapper) {
        wrapper = document.createElement('div')
        wrapper.id = 'btuCelebrate'
        wrapper.style.cssText = `
          background: transparent;
          position: fixed;
          pointer-events: none;
          z-index: calc(infinity);
          width: 300px;
          height: 300px;
          will-change: transform, opacity;
          transform: translate3d(0,0,0);
          contain: layout style paint;
          backface-visibility: hidden;
          perspective: 1000px;
        `
        document.body.appendChild(wrapper)
      }

      // Move where the pointer was pressed.
      const left = evt.pageX
      const top = evt.pageY
      const widthSparkles = 150 // Pre-calculate half of 300px
      const heightSparkles = 150

      // Use requestAnimationFrame for smooth positioning and rendering
      requestAnimationFrame(() => {
        if (wrapper) {
          wrapper.style.left = left - widthSparkles + 'px'
          wrapper.style.top = top - heightSparkles + 'px'
          wrapper.innerHTML = svg
        }
      })

      // Remove the celebration after the animation completes.
      runningTimerId = setTimeout(() => {
        if (wrapper) {
          document.body.removeChild(wrapper)
        }
      }, animationDuration)
    },
    false,
  )
}

document.readyState === 'loading'
  ? window.addEventListener('DOMContentLoaded', init)
  : init()
