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

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

  async function fetchData() {
    setLoading(true)

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

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

  return { loading, data }
}

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

//   async function fetchData() {
//     setLoading(true)

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

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

//   return { loading, data }
// }
// useEffect(() => {
//   const feedPromise =
//     data &&
//     data.map(async feedItem => {
//       if (feedItem.url) {
//         const id = feedItem.url.val.split('/').pop()

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

//         const item = {
//           name,
//           account,
//           category,
//           channel,
//           description,
//           embedPath,
//           language,
//           state,
//           previewPath,
//           views,
//           start: feedItem.start,
//           end: feedItem.end,
//         }

//         console.log(item)

//         return item
//       }
//       return null
//     })

//   feedPromise.then(result => {
//     console.log(result)
//   })
// }, [data])