import browser from 'webextension-polyfill'
import throttle from 'lodash/throttle'

import { onEnabledChange, isEnabled } from './perOrigin'


function hideBanners(elements) {
  const revertSteps = []

  /* Hide all elements with position:fixed */
  const fixedElements = elements
    .filter(el => (
      getComputedStyle(el).position === 'fixed'
      && el.style.opacity !== '0' // ignore if we already hid this one
    ))

  fixedElements.forEach(el => {
    const originalVisibility = el.style.visibility
    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.visibility = 'hidden'
    }, 1000)

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

  /* Stop position:sticky elements from sticking. */
  const stickyElements = elements
    .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
}

async function main() {
  let revertSteps = []

  // XXX We read the location only once, but it may be changed by page scripts.
  // Fortunately we only need the origin, which should remain the same.
  const url = window.location.href

  function run(elements) {
    if (enabled && scrolledDown) {
      // Hide everything that looks annoying. Remember the steps to revert this.
      if (elements === undefined) {
        elements = Array.from(document.querySelectorAll('*'))
      }
      revertSteps = hideBanners(elements).concat(revertSteps)
    } else {
      // Unhide everything we have hidden.
      if (revertSteps.length > 0) {
        revertSteps.forEach(step => step())
        revertSteps = []
      }
    }
  }

  // Run whenever the extension is enabled/disabled for this domain.
  let enabled = await isEnabled(url)
  onEnabledChange(url, newValue => { enabled = newValue; run() })

  // Run whenever crossing the scroll threshold.
  let scrolledDown = window.scrollY > 20
  window.addEventListener('scroll', () => {
    // We add a hysteresis of 20px.
    if (window.scrollY > 20 && !scrolledDown) {
      scrolledDown = true
      run()
    } else if (window.scrollY <= 0 && scrolledDown) {
      scrolledDown = false
      run()
    }
  })

  // Run on suspicious page mutations.
  const observer = new MutationObserver(mutationList => {
    let elements = []
    mutationList.forEach(mutationRecord => {
      if (mutationRecord.type === 'attributes') {
        const modifiedElement = mutationRecord.target
        elements.push(modifiedElement)
        if (mutationRecord.attributeName === 'class') {
          // A change in class is likely to influence style of the element's offspring
          const children = Array.from(modifiedElement.querySelectorAll('*'))
          elements = elements.concat(children)
        }
      } else if (mutationRecord.type === 'childList') {
        const newElements = [...mutationRecord.addedNodes]
          .filter(node => node instanceof Element)
        elements = elements.concat(newElements)
      }
    })
    run(elements)
  })
  observer.observe(document, {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ['class', 'style'],
  })

  // Run once now.
  run()
}

main()