import { h, getAssetPath } from '@stencil/core';
export class EclMediaContainer {
  constructor() {
    this.theme = 'ec';
    this.styleClass = undefined;
    this.alt = undefined;
    this.description = undefined;
    this.image = undefined;
    this.fullWidth = false;
    this.sources = undefined;
    this.tracks = undefined;
    this.ratio = '16-9';
    this.eclScript = false;
    this.withUtils = false;
    this.embeddedMedia = false;
  }
  getClass() {
    return [
      `ecl-media-container`,
      `ecl-media-container--${this.ratio}`,
      this.styleClass
    ].join(' ');
  }
  componentWillLoad() {
    if (this.withUtils && !document.querySelector('#ecl-utils-styles')) {
      const style = document.createElement('link');
      style.rel = 'stylesheet';
      style.type = 'text/css';
      style.id = 'ecl-utils-styles';
      style.href = getAssetPath(`./build/styles/ecl-utilities-${this.theme}.css`);
      document.body.appendChild(style);
    }
    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);
    }
  }
  render() {
    const sources = this.sources ? JSON.parse(this.sources) : '';
    const tracks = this.tracks ? JSON.parse(this.tracks) : '';
    const alt = this.alt ? { alt: this.alt } : '';
    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("figure", { class: this.getClass() }, this.image ?
      h("img", Object.assign({ class: "ecl-media-container__media", src: this.image }, alt))
      : '', sources && tracks ?
      h("video", { class: "ecl-media-container__media", poster: this.image, controls: true }, ...videoSources, ...videoTracks) : '', h("slot", { name: "embedded-media" }), h("figcaption", { class: "ecl-media-container__caption" }, h("slot", null))));
  }
  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
      },
      "alt": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "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
      },
      "ratio": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "ratio",
        "reflect": false,
        "defaultValue": "'16-9'"
      },
      "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"
      },
      "withUtils": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "with-utils",
        "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
