const DEFAULT_OPTIONS = {
  snap: false,
  indicator: false,
  waitForImagesLoaded: true,
  slideDuration: 1,
  slideEase: 'sine.inOut'
}

class Panner {
  constructor (el, opts = {}) {
    this.idx = 0
    this.opts = DEFAULT_OPTIONS

    this.elements = {}
    this.elements.container = el
    this.elements.panner = this.elements.container.querySelector('[data-panner]')
    this.elements.items = this.elements.container.querySelectorAll('[data-panner-item]')
    this.elements.images = this.elements.container.querySelectorAll('[data-panner-item] img')
    this.elements.indicator = this.elements.container.querySelector('[data-panner-indicator]')
    this.elements.previous = this.elements.container.querySelector('[data-panner-previous]')
    this.elements.next = this.elements.container.querySelector('[data-panner-next]')

    this.state = {}
    this.state.disableNext = false
    this.state.disablePrevious = true
    this.state.manuallyMoved = false
    this.state.offsets = []

    this.timeline = gsap.timeline()

    this.checkSnap()
    this.checkIndicator()
    this.checkDirectionalButtons()

    this.setupPanner()
  }

  checkSnap () {
    this.opts.snap = this.elements.panner.hasAttribute('data-panner-snap')
  }

  checkIndicator () {
    if (this.elements.indicator) {
      this.opts.indicator = true
      this.setupIndicator()
    }
  }

  checkDirectionalButtons () {
    if (this.elements.next) {
      this.opts.hasDirectionalButtons = true
      this.setupDirections()
    }
  }

  refreshBounds (waitForLoaded) {
    if (waitForLoaded) {
      // TODO: elements.items instead? isn't always img!
      imagesAreLoaded(this.elements.images, true).then(() => {
        this.doRefresh()
      })
    } else {
      this.doRefresh()
    }
  }

  setPannerMinMax (minX) {
    this.pannerMaxX = 0
    if (minX) {
      this.pannerMinX = minX
    } else {
      this.pannerMinX = (this.elements.container.scrollWidth
        - this.elements.container.clientWidth) * -1
    }
  }

  doRefresh () {
    this.setPannerMinMax()
    if (this.opts.snap) {
      this.refreshOffsetList()
    }
    this.applyBounds()

    if (this.opts.indicator) {
      this.refreshIndicator()
    }
  }

  applyBounds () {
    this.panner.applyBounds({
      maxX: this.pannerMaxX, minX: this.pannerMinX
    })
  }

  refreshIndicator () {
    gsap.set(this.elements.indicatorNib, {
      width: this.elements.indicator.clientWidth / this.indicatorWidthFactor
    })
    this.indicator.applyBounds(this.elements.indicator)
  }

  refreshOffsetList () {
    this.state.offsets = []
    const leftPad = this.elements.items[0].offsetLeft

    for (let i = 0; i < this.elements.items.length; i += 1) {
      this.state.offsets.push(-this.elements.items[i].offsetLeft + leftPad);
    }

    if (this.panner) {
      this.panner.vars.snap = this.state.offsets
    }
    this.setPannerMinMax(this.state.offsets[this.state.offsets.length - 1])
  }

  setupPanner () {
    gsap.set(this.elements.container, { overflowX: 'hidden', overflowY: 'hidden' })
    const that = this

    let snap
    let onMove
    let onThrowUpdate
    let onThrowComplete

    if (this.opts.snap) {
      this.refreshOffsetList()

      snap = this.state.offsets
    } else {
      this.setPannerMinMax()
    }

    if (this.opts.hasIndicator) {
      onThrowUpdate = function () {
        const percent = Math.round(
          (Math.min(Math.max(this.x / this.minX, 0), 1) + Number.EPSILON) * 1000
        ) / 1000
        that.moveIndicatorToPercent(percent)
      }

      onMove = function () {
        const percent = Math.round(
          (Math.min(Math.max(this.x / this.minX, 0), 1) + Number.EPSILON) * 1000
        ) / 1000
        that.moveIndicatorToPercent(percent)
      }
    }

    if (this.opts.hasDirectionalButtons) {
      onThrowComplete = function () {
        that.state.disablePrevious = this.x >= that.pannerMaxX
        that.state.disableNext = this.x <= that.pannerMinX
        that.updateArrows()
      }
    }

    const draggable = Draggable.create(this.elements.panner, {
      bounds: { maxX: this.pannerMaxX, minX: this.pannerMinX },
      edgeResistance: 0.65,
      type: 'x',
      inertia: true,
      autoScroll: false,
      zIndexBoost: false,
      trigger: this.elements.container,
      dragClickables: false,
      clickableTest (el) {
        if (el.hasAttribute('data-panner-previous') || el.hasAttribute('data-panner-next')) {
          return true
        }
        return false
      },
      snap,
      onMove,
      onThrowUpdate,
      onThrowComplete
    })

    this.panner = draggable[0]
  }

  onApplicationResize () {
    this.refreshBounds(false)
  }

  onApplicationRevealed () {
    this.refreshBounds(this.opts.waitForImagesLoaded)
  }

  movePannerToPercent (percent) {
    const newX = this.pannerMinX * percent
    gsap.to(this.elements.panner, { x: newX, ease: 'power3' })
  }

  moveIndicatorToPercent (percent) {
    const newX = this.indicator.maxX * percent
    gsap.to(this.elements.indicatorNib, { duration: 0.001, x: newX, ease: 'none' })
  }

  setupIndicator () {
    this.elements.indicatorNib = Dom.find(this.elements.container, '[data-panner-indicator-nib]')
    this.indicatorWidthFactor = parseInt(this.elements.indicatorNib.getAttribute('data-panner-indicator-nib'))

    gsap.set(this.elements.indicatorNib, {
      width: this.elements.indicator.clientWidth / this.indicatorWidthFactor
    })
    const that = this

    const draggable = Draggable.create(this.elements.indicatorNib, {
      type: 'x',
      bounds: this.elements.indicator,
      onDrag () {
        const percent = Math.round(
          (Math.min(Math.max(this.x / this.maxX, 0), 1) + Number.EPSILON) * 100
        ) / 100
        that.movePannerToPercent(percent)
      }
    })

    // eslint-disable-next-line prefer-destructuring
    this.indicator = draggable[0]
  }

  setupDirections () {
    this.elements.next.addEventListener('click', this.moveNext.bind(this))
    this.elements.previous.addEventListener('click', this.movePrevious.bind(this))
    this.updateArrows()
  }

  updateArrows () {
    if (this.state.disableNext) {
      if (this.elements.next) {
        this.elements.next.classList.add('disabled')
      }
      this.idx = this.elements.items.length - 1
    } else if (this.elements.next) {
      this.elements.next.classList.remove('disabled')
    }

    if (this.state.disablePrevious) {
      if (this.elements.previous) {
        this.elements.previous.classList.add('disabled')
      }
      this.idx = 0
    } else if (this.elements.previous) {
      this.elements.previous.classList.remove('disabled')
    }
  }

  movePrevious (e) {
    if (e) {
      e.preventDefault()
      e.stopImmediatePropagation()
    }

    if (this.idx === 0) {
      return
    }

    if (this.state.disablePrevious) {
      return
    }

    const currentItem = this.elements.items[this.idx]
    const currentItemRect = currentItem.getBoundingClientRect()

    this.idx -= 1

    const prevItem = this.elements.items[this.idx]
    const prevItemRect = prevItem.getBoundingClientRect()
    const x = prevItemRect.x - currentItemRect.x

    this.panner.update()
    if (this.panner.x - x > 0) {
      this.timeline
        .to(this.elements.panner, {
          x: 0,
          duration: this.opts.slideDuration,
          ease: this.opts.slideEase
        }, '>')
        .call(() => {
          this.panner.update()
          this.state.disablePrevious = true
          this.state.disableNext = false
          this.updateArrows()
        })
      return
    }

    this.timeline
      .to(this.elements.panner, {
        x: `-=${x}`,
        duration: this.opts.slideDuration,
        ease: this.opts.slideEase
      }, '>')
      .call(() => {
        this.panner.update()
        if (this.idx === 0) {
          this.state.disablePrevious = true
        } else {
          this.state.disablePrevious = false
        }
        this.state.disableNext = false
        this.updateArrows()
      })
  }

  moveNext (e) {
    if (e) {
      e.preventDefault()
      e.stopImmediatePropagation()
    }

    if (this.idx >= this.elements.items.length - 1) {
      return
    }

    if (this.state.disableNext) {
      return
    }

    const currentItem = this.elements.items[this.idx]
    const currentItemRect = currentItem.getBoundingClientRect()

    this.idx += 1

    const nextItem = this.elements.items[this.idx]
    const nextItemRect = nextItem.getBoundingClientRect()
    const x = nextItemRect.x - currentItemRect.x

    this.panner.update()

    this.timeline
      .to(this.elements.panner, {
        x: `-=${x}`,
        duration: this.opts.slideDuration,
        ease: this.opts.slideEase

      }, '>')
      .call(() => {
        this.panner.update()

        const lastItem = this.elements.images[this.elements.images.length - 1]
        const lastItemRect = lastItem.getBoundingClientRect()

        const lastEdge = lastItemRect.x + lastItemRect.width + (this.panner.x * -1)
        const scrollPosRight = this.panner.x * -1 + window.innerWidth

        this.state.disableNext = false
        this.state.disablePrevious = false

        if (this.panner.x < this.pannerMinX) {
          // next button triggered an x value that is less than
          // the boundary, so we set a new one.
          this.setPannerMinMax(this.panner.x)
          this.applyBounds()
        }

        if (lastEdge < scrollPosRight) {
          /* edge of last image visible, disable next */
          this.state.disableNext = true
          this.updateArrows()

          return
        }

        this.updateArrows()
      })
  }

  setIdx (idx) {
    this.idx = idx

    this.state.disableNext = false
    this.state.disablePrevious = false

    if (this.idx === 0) {
      this.state.disablePrevious = true
    }

    if (this.idx >= this.elements.items.length - 1) {
      this.state.disableNext = true
    }
  }
}

let $panner = document.querySelector('.container')
let p = new Panner($panner)