class SideScroller {
  constructor(selector) {
    this.elmClassName = selector.split('.').pop()
    this.wrap = document.getElementsByClassName(`${this.elmClassName}__wrap`)[0]
    this.handle = document.getElementsByClassName(`${this.elmClassName}__handle`)[0]
    this.mask = document.getElementsByClassName(`${this.elmClassName}__mask`)[0]
    this.fg = document.getElementsByClassName(`${this.elmClassName}__foreground`)[0]
    this.pos = 50
    this.create()
  }

  create() {
    this.handle.addEventListener('mousedown', this.drag)
    this.handle.addEventListener('touchstart', this.drag)
    window.addEventListener('resize', this.resizeHandler)
    this.setPosition()
  }

  drag = e => {
    e.preventDefault()
    document.addEventListener('mousemove', this.dragHandler)
    document.addEventListener('touchmove', this.dragHandler)
    document.addEventListener('mouseup', this.stopDragHandler)
    document.addEventListener('touchend', this.stopDragHandler)
  }

  resizeHandler = e => {
    this.setPosition()
  }

  dragHandler = e => {
    let percent = this.getPercent(e, this.wrap)
    if (percent < 0) {
      percent = 0
    } else if (percent > 100) {
      percent = 100
    }
    this.setPosition(percent)
  }

  stopDragHandler = e => {
    document.removeEventListener('mousemove', this.dragHandler)
    document.removeEventListener('mouseup', this.stopDragHandler)
  }

  getPercent(evt, elm) {
    let ref = evt.touches
      ? evt.touches[0].pageX
      : evt.pageX
    let rect = elm.getBoundingClientRect()
    return ((ref - rect.left) / rect.width) * 100
  }

  setPosition(percent = this.pos) {
    this.pos = percent
    this.mask.style.width = percent + '%'
    const clip = `inset(0 0 0 ${this.wrap.offsetWidth * percent / 100}px)`
    this.fg.style.clipPath = clip
    this.fg.style.webkitClipPath = clip
  }
}

new SideScroller('.SideScroller')