import { h } from 'preact'
import axios from 'axios'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'regenerator-runtime/runtime'
import { useEffect, useState } from 'preact/hooks'

import Video from './src/components/Video'
import config from './src/data/config'
import Info from './src/components/Info'
import { useFetch } from './src/assets/hooks/calendar'
import { P } from './src/components/Text'

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

export default () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [videoUrl, setVideoUrl] = useState(null)
  // const [feedData, setFeedData] = useState([])

  const { data: feedData, loading } = useFetch(`${config.calendar}`)

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