import { h } from 'preact'
import { useState, useEffect } from 'preact/hooks'
import { isWithinInterval, subHours } from 'date-fns'
import { addHours } from 'date-fns/esm'

import Video from './src/components/Video'
import config from './src/data/config'
import Info from './src/components/Info'
import { useEventStream } from './src/hooks/data'
import { useTimeout } from './src/hooks/timerHooks'

export default () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentVideo, setCurrentVideo] = useState(null)
  const [streamIsLive, setStreamLive] = useState(false)
  const [infoActive, setInfoActive] = useState(false)
  const [minLoadTimePassed, setMinTimeUp] = useState(false)
  const { data, loading } = useEventStream()

  useTimeout(() => {
    setMinTimeUp(true)
  }, 1500)

  useEffect(() => {
    if (data && data.length) {
      data.forEach((stream, index) => {
        // if (stream.title === 'A Wider Screen') {
        if (index === 0) {
          setCurrentVideo(stream)
        }
        if (
          isWithinInterval(new Date(), {
            start: subHours(stream.start, 1),
            end: addHours(stream.end, 1),
          })
        ) {
          setCurrentVideo(stream)
        }
        if (
          isWithinInterval(new Date(), {
            start: stream.start,
            end: stream.end,
          })
        ) {
          setStreamLive(`${config.peertube_root}${stream.embedPath}`)
        }
      })
    }
  }, [data])

  return (
    <div>
      {currentVideo && !infoActive && minLoadTimePassed ? (
        <Video
          playing={isPlaying}
          setPlaying={setIsPlaying}
          src={`${config.peertube_root}${currentVideo.embedPath}`}
          title={currentVideo.title}
          org={currentVideo.channel.displayName}
          setInfoActive={setInfoActive}
        />
      ) : (
        <Info
          data={data}
          loading={loading || !minLoadTimePassed}
          infoActive={infoActive}
          currentVideo={currentVideo}
          setInfoActive={setInfoActive}
        />
      )}
    </div>
  )
}