import { h } from "@stencil/core";
import getAssetPath from "../../utils/assetPath";
export class EclMediaContainer {
    constructor() {
        this.theme = 'ec';
        this.styleClass = undefined;
        this.imageAlt = undefined;
        this.description = undefined;
        this.image = undefined;
        this.fullWidth = false;
        this.sources = undefined;
        this.tracks = undefined;
        this.hasCaption = false;
        this.ratio = '';
        this.eclScript = false;
        this.embeddedMedia = false;
    }
    getClass() {
        return [
            `ecl-media-container`,
            this.styleClass
        ].join(' ');
    }
    componentWillLoad() {
        if (this.eclScript) {
            const src = getAssetPath('./build/scripts/ecl-media-container-vanilla.js');
            if (document.querySelector(`script[src="${src}"]`)) {
                document.querySelector(`script[src="${src}"]`).remove();
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => {
                const mediaContainer = new ECL.MediaContainer(this.el.firstElementChild);
                mediaContainer.init();
            };
            document.body.appendChild(script);
        }
    }
    componentDidRender() {
        const iframe = this.el.querySelector('iframe');
        if (iframe) {
            const iframeWrap = document.createElement('div');
            iframeWrap.classList.add('ecl-media-container__media', `sc-ecl-media-container-${this.theme}`);
            iframe.insertAdjacentElement('beforebegin', iframeWrap);
            iframeWrap.appendChild(iframe);
            if (this.ratio) {
                iframeWrap.classList.add(`ecl-media-container__media--ratio-${this.ratio}`);
            }
        }
        const expandable = this.el.querySelector('.ecl-expandable');
        if (expandable) {
            expandable.classList.add('ecl-media-container__expandable', `sc-ecl-media-container-${this.theme}`);
            const expandableContent = expandable.querySelector('.ecl-expandable__content');
            if (expandableContent) {
                expandableContent.classList.add(`sc-ecl-media-container-${this.theme}`);
                this.el.firstElementChild.setAttribute('aria-describedby', `${expandableContent.id}`);
            }
        }
    }
    render() {
        const sources = this.sources ? JSON.parse(this.sources) : '';
        const tracks = this.tracks ? JSON.parse(this.tracks) : '';
        const videoSources = sources ? sources.map((source) => (h("source", { type: source.type, src: source.src }))) : '';
        const videoTracks = tracks ? tracks.map((track) => (h("track", { kind: track.kind, label: track.label, src: track.src, srclang: track.src_lang }))) : '';
        return (h("div", { class: this.getClass() }, h("figure", { class: "ecl-media-container__figure" }, this.image ? (h("ecl-picture", { styleClass: `ecl-media-container__picture sc-ecl-media-container-${this.theme}`, imgClass: `ecl-media-container__media sc-ecl-media-container-${this.theme}`, image: this.image, imageAlt: this.imageAlt }, h("slot", { name: "sources" }))) : (''), sources && tracks ?
            h("video", { class: "ecl-media-container__media", poster: this.image, controls: true }, ...videoSources, ...videoTracks) : '', h("slot", { name: "embedded-media" }), this.hasCaption ?
            h("figcaption", { class: "ecl-media-container__caption" }, h("slot", null)) : ''), h("slot", { name: "expandable" })));
    }
    static get is() { return "ecl-media-container"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-media-container-ec.css"],
            "eu": ["./build/styles/ecl-media-container-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-media-container-ec.css"],
            "eu": ["build/styles/ecl-media-container-eu.css"]
        };
    }
    static get assetsDirs() { return ["build"]; }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "'ec'"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "style-class",
                "reflect": false
            },
            "imageAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-alt",
                "reflect": false
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "description",
                "reflect": false
            },
            "image": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image",
                "reflect": false
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "sources": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "sources",
                "reflect": false
            },
            "tracks": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "tracks",
                "reflect": false
            },
            "hasCaption": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-caption",
                "reflect": false,
                "defaultValue": "false"
            },
            "ratio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "ratio",
                "reflect": false,
                "defaultValue": "''"
            },
            "eclScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "ecl-script",
                "reflect": false,
                "defaultValue": "false"
            },
            "embeddedMedia": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "embedded-media",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-media-container.js.map
