import { h } from "@stencil/core";
import { ResolveLocation } from '../../models/resolve-location';
export class BceElementVideo {
    constructor() {
        this.resolveLocation = ResolveLocation.NOOP;
        this.url = '';
        this.youtube = false;
    }
    componentWillLoad() {
        if (!this.template)
            return;
        if (this.template.location.startsWith('BCE://')) {
            this.resolveLocation(this.template.location).then(url => (this.url = url));
            return;
        }
        const match1 = this.template.location.match(/youtube.com\/watch\?v=([^&]+)/);
        if (match1) {
            this.youtube = true;
            this.url = this.createYouTubeURL(match1[1]);
            return;
        }
        const match2 = this.template.location.match(/youtu\.be\/([^\?]+)/);
        if (match2) {
            this.youtube = true;
            this.url = this.createYouTubeURL(match2[1]);
            return;
        }
        this.url = this.template.location;
    }
    createYouTubeURL(id) {
        const url = this.template && new URL(this.template.location);
        const path = 'https://www.youtube.com/embed/' + id;
        const start = (url && url.searchParams.get('t')) || 0;
        const autoplay = this.template && this.template.autoplay;
        return `${path}?start=${start}&autoplay=${autoplay}`;
    }
    renderVideo() {
        if (!this.template || !this.url)
            return null;
        const { autoplay } = this.template;
        return (h("video", { key: this.url, autoplay: autoplay, muted: autoplay, playsInline: autoplay, controls: true },
            h("source", { src: this.url })));
    }
    renderYouTube() {
        return [
            h("img", { src: "http://placehold.it/16x9" }),
            h("iframe", { src: this.url, frameborder: "0", allowFullScreen: true })
        ];
    }
    render() {
        return this.youtube ? this.renderYouTube() : this.renderVideo();
    }
    static get is() { return "bce-element-video"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-video.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-video.css"]
    }; }
    static get properties() { return {
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Block.ElementVideo.Template",
                "resolved": "undefined | { readonly location: string; readonly autoplay: boolean; }",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "resolveLocation": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ResolveLocation",
                "resolved": "(location: string) => Promise<string>",
                "references": {
                    "ResolveLocation": {
                        "location": "import",
                        "path": "../../models/resolve-location"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "ResolveLocation.NOOP"
        }
    }; }
    static get states() { return {
        "url": {},
        "youtube": {}
    }; }
}
