import { useState, useEffect, useRef } from 'react'
import Splash from 'components/Splash'
import fetchJson from 'helpers/fetchJson'

const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(null)
  const videoEl = useRef()

  const handleEnd = () => {
    setCurrent(current === playlist.length - 1 ? null : current + 1)
  }

  useEffect(() => {
    setLoading(true)
    if (current === null) {
      setData(null)
      setDetails(d => ({ ...d, show: false }))
    }

    switch (playlist[current].type.split('_')[0]) {
      case 'yt':
        fetchJson('/api/youtube/video', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: playlist[current].id })
        })
          .then(v => {
            setData({
              id: v.videoDetails.videoId,
              formats: v.formats
                .filter(v => !v.isHLS && v.hasAudio && (audioOnly ? !v.hasVideo : v.hasVideo))
                .sort((a, b) => audioOnly ? a.audioBitrate < b.audioBitrate : a.bitrate < b.bitrate)
            })
            setDetails(d => ({
              ...d,
              title: v.videoDetails.title,
              description: v.videoDetails.description
            }))
          })
          .catch(() => console.log('error fetching video'))
          .finally(() => setLoading(false))
        break
      default:
    }
  }, [playlist && playlist[current].id, audioOnly])

  return (
    data && !loading
      ? (
        <video
          onEnded={handleEnd}
          ref={videoEl}
          key={data.id}
          controls
          playsInline
          webkit-playsInline
          autoPlay
          style={audioOnly ? { backgroundImage: 'url(' + playlist[current].thumbnail + ')' } : {}}
        >
          {
            data.formats.map(s => (
              <source src={s.url} type={s.mimeType} key={s.url} />
            ))
          }
          Your browser does not support the video tag.
        </video>
        )
      : (
        <Splash />
        )
  )
}

export default Video