import { Component, Element, Prop, State, Watch, Method, h } from '@stencil/core';
export class SparkleYoutube {
  constructor() {
    this.video_thumbnail = '';
  }
  componentDidLoad() {
    this.classMode = this.initialClassMode;
    this.classModeChanged();
  }
  classModeChanged() {
    if (this.classMode) {
      var youtube_video_id = this.src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
      if (youtube_video_id.length == 11) {
        this.video_thumbnail = '//img.youtube.com/vi/' + youtube_video_id + '/0.jpg';
      }
    }
  }
  async classRoomModeChanged(val) {
    this.classMode = val;
  }
  render() {
    return (h("div", null, !this.classMode ? (h("div", { class: "embed-container" },
      h("iframe", { src: this.src.replace("watch?v=", "embed/"), frameborder: "0", allowFullScreen: true }))) : (h("div", null,
      h("img", { src: this.video_thumbnail })))));
  }
  static get is() { return "sparkle-youtube"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-youtube.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-youtube.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
    },
    "initialClassMode": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "initial-class-mode",
      "reflect": false
    }
  }; }
  static get states() { return {
    "classMode": {},
    "video_thumbnail": {}
  }; }
  static get methods() { return {
    "classRoomModeChanged": {
      "complexType": {
        "signature": "(val: any) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "classMode",
      "methodName": "classModeChanged"
    }]; }
}
