import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';
export class WistiaVideo {
    constructor() {
        this.width = 720;
        this.height = 520;
    }
    handleWindowResize() {
        window.requestAnimationFrame(() => this.resizeVideo());
    }
    componentDidLoad() {
        window.requestAnimationFrame(() => this.resizeVideo());
    }
    resizeVideo() {
        if (this.el) {
            const parent = this.el.parentElement;
            const width = parent === null || parent === void 0 ? void 0 : parent.offsetWidth;
            if (!width) {
                return;
            }
            this.width = width;
            this.height = width * (10 / 16);
        }
    }
    render() {
        const { videoId } = this;
        if (!videoId) {
            return null;
        }
        return (h(Host, null,
            h("script", { src: "//fast.wistia.com/assets/external/E-v1.js", async: true }),
            h("div", { class: `wistia_embed wistia_async_${videoId}`, style: {
                    width: `${this.width}px`,
                    height: `${this.height}px`,
                } }, "\u00A0")));
    }
    static get is() { return "wistia-video"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["wistia-video.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["wistia-video.css"]
    }; }
    static get properties() { return {
        "videoId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "video-id",
            "reflect": false
        }
    }; }
    static get states() { return {
        "width": {},
        "height": {}
    }; }
    static get elementRef() { return "el"; }
    static get listeners() { return [{
            "name": "resize",
            "method": "handleWindowResize",
            "target": "window",
            "capture": false,
            "passive": true
        }]; }
}
