import { useState, useEffect, useRef } from "react"
import { useParams } from "react-router-dom"
import axios from "axios"
import Plyr from "plyr-react"
import Hls from "hls.js"
import "plyr-react/dist/plyr.css"
function AnimeWatch({ instance }) {
	const videoPlayer = useRef(null)
	const { anime } = useParams()
	const queryParams = new URLSearchParams(window.location.search)
	const index = queryParams.get("index")
	const [info, setInfo] = useState([])
	const [titleAnime, setTitleAnime] = useState("")
	const [currentEpisodeName, setCurrentEpisodeName] = useState("")
	useEffect(() => {
		const CancelToken = axios.CancelToken
		const source = CancelToken.source()
		const getList = async () => {
			await instance
				.get(`/watch/${anime}`, {
					cancelToken: source.token,
				})
				.then(async (response) => {
					const mainId = response.data.data.id
					const numIndex = Number(index)
					setTitleAnime(response.data.data.name)
					setInfo(response.data.data.episodes)
					await instance
						.get(`/anime/${mainId}/episodes/${numIndex}`, {
							cancelToken: source.token,
						})
						.then((res) => {
							// VIDEO URL IS HERE, it's can be mp4 or m3u8
							const videoUrl = res.data.data.videoSource
							
							let xhttp = new XMLHttpRequest()
							xhttp.open("HEAD", videoUrl)
							xhttp.onreadystatechange = function () {
								if (this.readyState == this.DONE) {
									if (this.getResponseHeader("Content-Type") === "video/mp4") {
										console.log("This is mp4")
									} else {
										console.log("This is m3u8")
										const defaultOptions = {}
										const videoElement = videoPlayer.current.plyr.media
										const hls = new Hls()
										hls.loadSource(videoUrl)
										hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
											const availableQualities = hls.levels.map((l) => l.height)
											defaultOptions.quality = {
												default: availableQualities[0],
												options: availableQualities,
												forced: true,
											}
										})
										hls.attachMedia(videoElement)
									}
								}
							}
							xhttp.send()
 setCurrentEpisodeName(res.data.data.full_name)
						})
				})
				.catch((thrown) => {
					if (axios.isCancel(thrown)) return
				})
		}
		getList()
		return () => {
			source.cancel()
		}
	}, [])
	return (
		<>
				<div>
					<Plyr ref={videoPlayer} />
				</div>
		</>
	)
}
export default AnimeWatch