import { h } from 'preact'
import { useState, useEffect } from 'preact/hooks'
import 'regenerator-runtime/runtime'
import axios from 'axios'

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

// const appStates = [
//  'noStream',
//  'streamLive',
//  'streamFinished'
// ]

export default () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [videoUrl, setVideoUrl] = useState(null)
  const [feedData, setFeedData] = useState([])
  const [minLoadTimePassed, setMinTimeUp] = useState(false)
  const { data, loading } = useCalendar()

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

  useEffect(() => {
    if (data && data.length) {
      data.forEach(async (calItem, index) => {
        if (calItem.url) {
          const id = calItem.url.val.split('/').pop()

          const {
            data: {
              account,
              category,
              channel,
              embedPath,
              language,
              name,
              state,
              previewPath,
              views,
            },
          } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)

          const item = {
            name,
            account,
            category,
            channel,
            description: calItem.description,
            embedPath,
            language,
            state,
            previewPath,
            views,
            start: calItem.start,
            end: calItem.end,
            id,
          }
          setFeedData(arr => [...arr, item])
        }
      })
    }
  }, [data])

  return (
    <div>
      {false ? (
        <Video
          playing={isPlaying}
          setPlaying={setIsPlaying}
          src={videoUrl}
          title={config.next_stream.title}
          org={config.next_stream.org}
        />
      ) : (
        <Info data={feedData} loading={loading || !minLoadTimePassed} />
      )}
    </div>
  )
}