const Range = ({ containerStyle, containerClassName, min, max, value, step, onChange }) => {
  const animate = (timestamp, delta) => {
    console.log('AnimationTick', {timestamp, delta})
  }

  const [startAnimation, stopAnimation, getIsAnimatingRef, getIsAnimatingState] = useAnimationFrame(animate, true)

  useDocumentEvents({
    'pointerup' (event) {
      stopAnimation()
    },
    'pointermove' (event) {
      if (getIsAnimatingRef()) {
        console.log('[Document Pointer Move]', event)
      }
    }
  })

  const pointerDownEventHandlerForRangeDot = event => {
    if (getIsAnimatingRef() !== true) {
      startAnimation()
    }
  }

  return (
    <div>
      <div>
        { getIsAnimatingState() ? 'Animating' : 'Stopped' }
      </div>
      <div style={containerStyle} className={`range ${containerClassName}`}>
        <div className='range-dot' style={{ background: 'red' }}
          onPointerDown={pointerDownEventHandlerForRangeDot}
          onPointerUp={() => stopAnimation()}
          onPointerCancel={() => stopAnimation()}
        />
      </div>
    </div>
  )
}