import { h } from "@stencil/core";
import MediaContainer from "@ecl/media-container";
export class EclMediaContainer {
    constructor() {
        this.imageAnchor = 'center';
        this.fullWidth = false;
        this.autoplay = false;
        this.hasCaption = false;
        this.ratio = '';
        this.noScript = false;
        this.embeddedMedia = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-media-container`,
            this.styleClass
        ];
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        if (!this.noScript && (this.embeddedMedia || (this.sources || this.tracks))) {
            this.el.firstElementChild.setAttribute('data-ecl-media-container', "");
            if (this.sources || this.tracks) {
                const video = this.el.querySelector('video');
                if (video) {
                    video.setAttribute('data-ecl-media-container-video', '');
                }
            }
            ;
            window.ECL = window.ECL || {};
            ECL.MediaContainer = MediaContainer;
            const mediaContainer = new ECL.MediaContainer(this.el.firstElementChild);
            mediaContainer.init();
        }
        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.classList.add(`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", { key: '72e3602bbe13f49476c3b2f4e6dd6127a6fd3ac6', class: this.getClass() }, h("figure", { key: '45c189cb5bb37baf4732a60e1820b0374e237a14', class: `ecl-media-container__figure${this.fullWidth ? ' ecl-media-container--full-width' : ''}` }, this.image &&
            h("ecl-picture", { key: '3eec4b983ebada029b76f292c044913e7fe051b2', 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, imageAnchor: this.imageAnchor }, h("slot", { key: 'ee196885f12087d597cb75ce655a4244ea3d7050', name: "sources" })), sources && tracks &&
            h("div", { key: '8f7b7db933953971f72ae3ac5c4919166d5b4817', class: "ecl-media-container__video-wrapper" }, h("ecl-video", { key: 'ceba99e59e2c743eb77129edd716c269bdce1f97', "style-class": `ecl-media-container__media sc-ecl-media-container-${this.theme}`, poster: this.image, autoplay: this.autoplay, loop: this.autoplay, muted: this.autoplay, controls: !this.autoplay, "sr-video-player": this.srVideoPlayer, "sr-video-audio": this.srVideoAudio }, ...videoSources, ...videoTracks), this.autoplay &&
                h("ecl-button", { key: 'd1b7b2a9d2673044812260b256997792d1b325cf', "hide-label": true, type: "button", variant: "tertiary", "container-extra-classes": `sc-ecl-media-container-${this.theme}`, "style-class": `ecl-media-container__play sc-ecl-media-container-${this.theme}`, "data-ecl-media-container-play": true }, this.srPlay, h("ecl-icon", { key: 'd481696a02f8d4c53758224a8b41c67a77765528', slot: "icon-after", icon: "play-outline", size: "m", "style-class": `sc-ecl-media-container-${this.theme}` })), this.autoplay &&
                h("ecl-button", { key: '223235409c9226d87558e1d5e9907b4283c80f28', "hide-label": true, type: "button", variant: "tertiary", "container-extra-classes": `sc-ecl-media-container-${this.theme}`, "style-class": `ecl-media-container__pause sc-ecl-media-container-${this.theme}`, "data-ecl-media-container-pause": true }, this.srPause, h("ecl-icon", { key: '5c0ee8090326b112133b234105c4226534268ebe', slot: "icon-after", icon: "pause-outline", size: "m", "style-class": `sc-ecl-media-container-${this.theme}` }))), h("slot", { key: '69ebc404b6100be35eeec51f6f9bd271cd3352eb', name: "embedded-media" }), this.hasCaption ?
            h("figcaption", { class: "ecl-media-container__caption" }, h("slot", null)) : ''), h("slot", { key: '84560232d8477c51b2f6ecc2852064719397d76b', name: "expandable" })));
    }
    static get is() { return "ecl-media-container"; }
    static get encapsulation() { return "scoped"; }
    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 properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "imageAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-alt"
            },
            "image": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image"
            },
            "imageAnchor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-anchor",
                "defaultValue": "'center'"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-width",
                "defaultValue": "false"
            },
            "sources": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sources"
            },
            "tracks": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tracks"
            },
            "autoplay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autoplay",
                "defaultValue": "false"
            },
            "hasCaption": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-caption",
                "defaultValue": "false"
            },
            "ratio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio",
                "defaultValue": "''"
            },
            "srPlay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-play"
            },
            "srPause": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-pause"
            },
            "srVideoPlayer": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-video-player"
            },
            "srVideoAudio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-video-audio"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "embeddedMedia": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "embedded-media",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
