import { Clock } from 'three'
import { useScene } from '/@/core'

let request: number

export type TresLoop = (delta: number, elapsedTime: number) => void

export function useLoop(cb: TresLoop, beforeCb?: TresLoop, afterCb?: TresLoop) {
  const clock = new Clock()
  const { scene } = useScene()
  const loop = () => {
    // Update renderer
    const elapsedTime = clock.getElapsedTime()
    const delta = clock.getDelta()

    if (scene) {
      if (beforeCb) {
        beforeCb(delta, elapsedTime)
      }
      cb(delta, elapsedTime)
      if (afterCb) {
        afterCb(delta, elapsedTime)
      }
    }

    request = requestAnimationFrame(loop)
  }

  loop()

  function disposeLoop() {
    cancelAnimationFrame(request)
  }

  return {
    disposeLoop,
  }
}