import { ResourceLoader } from "../../partial-src/component/resourceLoader"
import { MobileConsole } from "../../partial-src/component/mobileConsole";

let console = MobileConsole.initialize()
console.show()

export function run() {
    describe("Test resource loader", () => {
        it("A image, a audio, a video", () => {
            let rl = new ResourceLoader()
            let rs = rl.createSession()
            let monitor = document.createElement("div")
            let progressIndicator = document.createElement("div")
            progressIndicator.style.marginBottom = "20px"
            monitor.appendChild(progressIndicator)
            progressIndicator.innerHTML = "0%"
            monitor.style.position = "fixed"
            monitor.style.top = "0"
            monitor.style.left = "0"
            monitor.style.width = "300px"
            document.body.appendChild(monitor)
            rs.events.listenBy(this, "start", () => {
                console.log("start")
            })
            rs.events.listenBy(this, "progress", (progress) => {
                console.log(progress.percentage)
                progressIndicator.innerHTML = progress.percentage
            })
            rs.events.listenBy(this, "finish", () => {
                console.log("finish")
            })
            rs.add("video", "http://vjs.zencdn.net/v/oceans.mp4", "video")
                .add("audio", "https://cdn.fusroda.io/restaurant-ordering/resource/media/audio.mp3", "audio")
                .add("image", "https://cdn.fusroda.io/fusroda-homesite/resource/banner/home.jpg", "image")
                .load((err) => {
                    if (err) {
                        console.log(err.message)
                        return
                    }
                    let image = rl.get<HTMLImageElement>("image")
                    let video = rl.get<HTMLVideoElement>("video")
                    let audio = rl.get<HTMLVideoElement>("audio")
                    window.console.log("audio", audio)
                    image.style.width = "100%"
                    video.style.width = "100%"


                    let playBtn = document.createElement("div")
                    playBtn.innerHTML = "play"
                    playBtn.style.position = "fixed"
                    playBtn.style.left = "100px"
                    playBtn.style.top = "0"
                    monitor.appendChild(video)
                    playBtn.addEventListener("click", () => {
                        console.log("play")
                        window.setTimeout(() => {
                            monitor.appendChild(image)
                            monitor.appendChild(audio)
                            monitor.appendChild(video)
                            video.setAttribute("controls", "")
                            audio.setAttribute("controls", "")
                            video.play()
                            audio.play()
                        }, 1000)
                    })
                    document.body.appendChild(playBtn)
                })
            return true
        })
    })

}