import gsap from 'https://cdn.skypack.dev/gsap'

const { InertiaPlugin } = window

gsap.registerPlugin(Draggable)
gsap.registerPlugin(InertiaPlugin)

const friction = -0.5
const CONTAINER = document.querySelector('.slider')
const PROXY = document.querySelector('.slider__proxy')
const LABEL = document.querySelector('.slider__label')
const INPUT = document.querySelector('input')
const VALUE_TOGGLE = document.querySelector('button')
const PROXY_PROPS = gsap.getProperty(PROXY)
const TRACKER = InertiaPlugin.track(PROXY, 'x,y')[0]
const BUMP = 10

let animateBounce

gsap.defaults({
  overwrite: true,
})

const syncInput = e => {
  const range = PROXY_PROPS('x')
  const width = CONTAINER.getBoundingClientRect().width
  const radius = PROXY.getBoundingClientRect().width / 2
  const min = INPUT.min
  const max = INPUT.max
  const value =
    e && e.type === 'change'
      ? e.target.value
      : Math.floor(gsap.utils.mapRange(radius, width - radius, min, max, range))

  if (!isNaN(value)) {
    gsap.set(INPUT, { value })
    gsap.set(LABEL, { innerText: value })
    if (e && e.type === 'change')
      gsap.set(PROXY, {
        x: gsap.utils.mapRange(min, max, radius, width - radius, value),
      })
  }
}

INPUT.addEventListener('change', syncInput, false)

function checkBounds() {
  const radius = PROXY.getBoundingClientRect().width / 2
  let r = radius
  let x = PROXY_PROPS('x')
  let vx = TRACKER.get('x')
  let xPos = x

  let hitting = false

  syncInput()

  if (x + r > CONTAINER.getBoundingClientRect().width) {
    xPos = CONTAINER.getBoundingClientRect().width - r
    vx *= friction
    hitting = true
  } else if (x - r < 0) {
    xPos = r
    vx *= friction
    hitting = true
  }

  if (hitting) {
    animateBounce(xPos, vx)
  }
}

animateBounce = (x = '+=0', vx = 'auto') => {
  gsap.fromTo(
    PROXY,
    { x },
    {
      inertia: {
        x: vx,
      },
      onUpdate: checkBounds,
    }
  )
}

const dragHandle = new Draggable(PROXY, {
  bounds: CONTAINER,
  type: 'x',
  onPress: () => {
    gsap.killTweensOf(PROXY)
    dragHandle.update()
  },
  onDragEndParams: [],
  onDragEnd: animateBounce,
  onDrag: syncInput,
})