import { useState, useEffect, useRef } from 'react'
import Image from 'next/image'
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,
              thumbnail: v.videoDetails.thumbnails[0].url,
              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
          >
            {
              data.formats.map(s => (
                <source src={s.url} type={s.mimeType} key={s.url} />
              ))
            }
            Your browser does not support the video tag.
          </video>
          {audioOnly && (
            <>
              <div />
              <span style={{ backgroundImage: `url(${data.thumbnail})` }} />
              <Image src='/phono.png' height='160' width='90' />
            </>
          )}
        </>
        )
      : (
        <Splash />
        )
  )
}

export default Video