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/conf.json'

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

  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get(
        `${config.peertube_root}/api/v1/videos/${config.next_stream.peertube_id}`
      )
      console.log(data)
      const src = `${config.peertube_root}${data.embedPath}`
      console.log('src', src)
      setVideoUrl(src)
    }

    getData()
  }, [])

  return (
    <div>
      {videoUrl && (
        <Video playing={isPlaying} setPlaying={setIsPlaying} src={videoUrl} />
      )}
    </div>
  )
}