import { useEffect, useState, useRef } from 'preact/hooks'
import axios from 'axios'
import ical from 'ical'
import config from '../data/config'

export const useEventStream = () => {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  async function fetchData() {
    setLoading(true)

    const { data: responseData } = await axios.get(`${config.calendar}`)
    const calItems = Object.values(ical.parseICS(responseData))
      .filter(feedItem => feedItem.type === 'VEVENT')
      .sort((a, b) => new Date(a.start) - new Date(b.start))

    await Promise.all(
      calItems.map(async calItem => {
        if (calItem.url) {
          const id = calItem.url.val.split('/').pop()
          const {
            data: {
              account,
              category,
              channel,
              embedPath,
              language,
              state,
              previewPath,
              views,
              duration,
            },
            data: nesd,
          } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)

          console.log({ nesd })

          const item = {
            title: calItem.summary,
            account,
            category,
            channel,
            description: calItem.description,
            embedPath,
            language,
            state,
            previewPath,
            views,
            start: calItem.start,
            end: calItem.end,
            id,
            duration,
            videoUrl: calItem?.url?.val,
          }
          setData(arr => [...arr, item])
        }
      })
    )

    setLoading(false)
  }

  useEffect(() => {
    fetchData()
  }, [])

  return { loading, data }
}