import { h } from '@stencil/core';
import { Css, DomUtil } from '@ema/core';
export class Iframe {
    constructor() {
        this.fullscreenClass = 'iframe-holder-fullscreen';
        this.width = '100%';
        this.height = '420px';
        this.fullscreen = false;
        this.fullscreenMargin = '0 0 0 0';
    }
    onIframeLoaded() {
        this.iframeLoaded.emit({ src: this.src });
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        let iframe = this.el.getElementsByClassName('ema-iframe-iframe')[0];
        let holderEl = this.el.getElementsByClassName('ema-iframe-holder')[0];
        if (!this.fullscreen) {
            Css.setVar('width', this.width, this.el);
            Css.setVar('height', this.height, this.el);
            iframe.setAttribute('width', Css.getVar('width', this.el));
            iframe.setAttribute('height', Css.getVar('height', this.el));
        }
        if (this.fullscreen) {
            let margins = this.fullscreenMargin.split(' ');
            if (margins.length && margins.length === 1) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[0], this.el);
                Css.setVar('bottom', margins[0], this.el);
                Css.setVar('left', margins[0], this.el);
            }
            if (margins.length && margins.length === 2) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[0], this.el);
                Css.setVar('left', margins[1], this.el);
            }
            if (margins.length && margins.length === 3) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[2], this.el);
            }
            if (margins.length && margins.length === 4) {
                Css.setVar('top', margins[0], this.el);
                Css.setVar('right', margins[1], this.el);
                Css.setVar('bottom', margins[2], this.el);
                Css.setVar('left', margins[3], this.el);
            }
            DomUtil.addClass(holderEl, this.fullscreenClass);
        }
        if (this.zIndex)
            Css.setVar('zIndex', this.zIndex, this.el);
        iframe.onload = () => {
            Css.setVar('visibility', 'visible', this.el);
            this.iframeLoaded.emit({ src: this.src, el: this.el });
        };
    }
    render() {
        return (h("div", { class: 'ema-iframe-holder ' },
            h("iframe", { src: this.src, frameborder: "0", class: "ema-iframe-iframe" })));
    }
    static get is() { return "ema-iframe"; }
    static get originalStyleUrls() { return {
        "$": ["iframe.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["iframe.css"]
    }; }
    static get properties() { return {
        "src": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "src",
            "reflect": false
        },
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "width",
            "reflect": false,
            "defaultValue": "'100%'"
        },
        "height": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "height",
            "reflect": false,
            "defaultValue": "'420px'"
        },
        "zIndex": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "z-index",
            "reflect": false
        },
        "fullscreen": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "fullscreen",
            "reflect": false,
            "defaultValue": "false"
        },
        "fullscreenMargin": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "fullscreen-margin",
            "reflect": false,
            "defaultValue": "'0 0 0 0'"
        }
    }; }
    static get events() { return [{
            "method": "iframeLoaded",
            "name": "iframeLoaded",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
}
