import { useEffect, useMemo, useState } from 'react'
import { useVideoPlayer } from 'expo-video'

const usePlaybackPlayer = ({ item, isActive }) => {
  const baseVideoUrl = item?.playbackUrl || null
  const videoUrl = baseVideoUrl

  const videoPlayer = useVideoPlayer(videoUrl || null, (player) => {
    player.loop = false
    player.muted = false
    player.timeUpdateEventInterval = 0.2
  })

  const shouldAutoPlay = isActive

  useEffect(() => {
    if (!videoPlayer) return
    if (shouldAutoPlay) {
      try {
        videoPlayer.currentTime = 0
        videoPlayer.play()
      } catch (e) {}
    } else if (videoPlayer?.playing) {
      try {
        videoPlayer.pause()
      } catch (e) {}
    }
  }, [shouldAutoPlay, videoPlayer])

  useEffect(() => {
    return () => {
      try {
        if (videoPlayer?.playing) videoPlayer.pause()
      } catch (e) {}
    }
  }, [videoPlayer])

  const [currentTimeS, setCurrentTimeS] = useState(0)
  useEffect(() => {
    if (!isActive) return
    const id = global.setInterval(() => {
      try {
        setCurrentTimeS(Number(videoPlayer?.currentTime || 0))
      } catch (e) {}
    }, 250)
    return () => global.clearInterval(id)
  }, [isActive, videoPlayer])

  const playerState = useMemo(
    () => ({
      videoUrl,
      videoPlayer,
      currentTimeS,
    }),
    [videoPlayer, videoUrl, currentTimeS]
  )

  return playerState
}

export default usePlaybackPlayer