import React, { useEffect, useState, useCallback } from 'react'

export const PlayerControl = ({ interval, onTick, onStart, onStop }) => {
  const dispatch = useDispatch()
  const [isPlaying, setPlaying] = useState(false)

  const [handle, setHandle] = useState(null)

  useEffect(() => {
    console.log('effect fired', isPlaying)
    clearInterval(handle)
    if (isPlaying) {
      setHandle(setInterval(() => dispatch(incrementSegment()), 500))
    }
  }, [handle, isPlaying])

  return (
    <div>
      <button onClick={() => dispatch(stop())}>{'stop'}</button>
      <button onClick={() => dispatch(pause())}>{'pause'}</button>
      <button onClick={() => dispatch(start())}>{'play'}</button>
      <div>playing: {isPlaying.toString()}</div>
      <div>interval: {handle}</div>
    </div>
  )
}