import browser from 'webextension-polyfill'

function hideBanners() {
  const revertSteps = []

  /* Hide all elements with position:fixed */
  const fixedElements = Array.from(document.querySelectorAll('*'))
    .filter(el => getComputedStyle(el).position === 'fixed')

  fixedElements.forEach(el => {
    const originalDisplay = el.style.display
    const originalOpacity = el.style.opacity
    const originalTransition = el.style.transition
    el.style.transition = 'opacity 1s'
    el.style.opacity = '0'

    const hiderTimeoutId = window.setTimeout(() => {
      el.style.display = 'none'
    }, 1000)

    revertSteps.push(() => {
      window.clearTimeout(hiderTimeoutId)
      const reverterTimeoutId = window.setTimeout(() => {
        el.style.transition = originalTransition
      }, 1000)
      el.style.display = originalDisplay
      window.setTimeout(() => {
        el.style.opacity = originalOpacity
      })
    })
  })

  /* Stop position:sticky elements from sticking. */
  const stickyElements = Array.from(document.querySelectorAll('*'))
    .filter(el => getComputedStyle(el).position === 'sticky')

  stickyElements.forEach(el => {
    const originalPosition = el.style.position
    el.style.position = 'relative'
    revertSteps.push(() => {
      el.style.position = originalPosition
    })
  })

  return revertSteps
}


function main() {
  let state = 'off'
  let revertSteps = []

  function onScroll() {
    let action
    if (window.scrollY > 20 && state === 'off') {
      state = 'starting'
      action = () => {
        revertSteps = revertSteps.concat(hideBanners())
        state = 'on'
      }
    } else if (window.scrollY <= 0 && state === 'on') {
      state = 'stopping'
      action = () => {
        revertSteps.forEach(step => step())
        revertSteps = []
        state = 'off'
      }
    }
    if (action) {
      window.requestAnimationFrame(action)
    }
  }

  window.addEventListener('scroll', onScroll)
}

main()