const html = document.documentElement
const body = document.body

/**
  Pseudo HTML element which behaves like a regular element in terms of scrolling.
*/
const documentElement = {
  set scrollLeft(x) { html.scrollLeft = x },
  get scrollLeft() { return window.scrollX || window.pageXOffset },
  set scrollTop(x) { html.scrollTop = x },
  get scrollTop() { return window.scrollY || window.pageYOffset },
  get scrollWidth() {
    return Math.max(
      body.scrollWidth, html.scrollWidth,
      body.offsetWidth, html.offsetWidth,
      body.clientWidth, html.clientWidth,
    )
  },
  get scrollHeight() {
    return Math.max(
      body.scrollHeight, html.scrollHeight,
      body.offsetHeight, html.offsetHeight,
      body.clientHeight, html.clientHeight,
    )
  },
  get clientWidth() { return html.clientWidth },
  get clientHeight() { return html.clientHeight },
  getBoundingClientRect() {
    return {
      x: 0,
      y: 0,
      top: 0,
      left: 0,
      width: this.clientWidth,
      height: this.clientHeight,
    }
  },
  addEventListener(event, ...args) {
    const target = event === 'scroll' ? window : html
    return target.addEventListener(event, ...args)
  },
  removeEventListener(event, ...args) {
    const target = event === 'scroll' ? window : html
    return target.removeEventListener(event, ...args)
  },
}

export default documentElement