import ScreenApi from "../../ScreenApi.js";
import HtmlControl from "../../core/HtmlControl.js";
import ScriptInstaller from "../../core/ScriptInstaller.js";
import { XNode } from "../../core/XNode.js";
import { installCss } from "../../core/installCss.js";


let videoScript: Promise<void>;;

declare let videojs: any;

class VideoPlayer extends HtmlControl {

    source: string;
    autoplay: string;
    youtube: string;
    preload: string;
    controls: string;
    vimeo: string;
    embed: string;
    poster: string;
    muted: string;
    player: any;

    async prepare() 
    {
        await ( videoScript??= ScriptInstaller.install("https://cdn.jsdelivr.net/npm/video.js@8.12.0/dist/video.min.js"));
        
        installCss("https://cdn.jsdelivr.net/npm/video.js@8.12.0/dist/video-js.css", "");

        this.source = this.getAttribute("source") ?? this.getAttribute("src");
        this.youtube = this.getAttribute("youtube");
        this.embed = this.getAttribute("embed");
        this.poster = this.getAttribute("poster");
        this.controls = this.getAttribute("controls") ?? "true";
        this.preload = this.getAttribute("preload") ?? "metadata";
        this.muted = this.getAttribute("muted");
        this.autoplay = this.getAttribute("autoplay");

        if (!this.source) {
            const root = this.attachShadow({ mode: "open"});
            if (!this.embed) {
                const { youtube } = this;
                if (youtube) {
                    if (youtube.startsWith("https://") || youtube.startsWith("//")) {
                        this.embed = youtube;
                    } else {
                        this.embed = `https://www.youtube.com/embed/${youtube}`;
                    }
                }
            }

            if (this.embed) {
                XNode.render(root, <div>
                    <iframe
                        src={this.embed}
                        part="frame"/>
                </div>);
                return;        
            }
            this.textContent = "No Source Set";
            return;
        }

        XNode.render(this, <div><video part="video"></video></div>);
        const v = this.querySelector("video") as HTMLVideoElement;
        v.src = this.source;
        if (this.autoplay) {
            this.muted = "true";
            ScreenApi.waitForVisible(v).then(() => {
                v.autoplay = true;
                this.player.play();
            });
        }
        if (this.muted === "true") {
            v.muted = true;
        }
        if (this.preload) {
            v.preload = this.preload as any;
        }
        if (this.controls === "true") {
            v.controls = true;
        }
        v.className = "video-js";
        if (this.poster) {
            v.poster = this.poster;
        }
        videoScript.then(() => {
            this.player = videojs(this.querySelector("video"));
        });

    }

    disconnectedCallback() {
        this.player?.dispose();
    }

    
}

customElements.define("video-player", VideoPlayer);