import { Component, Prop, h, Host, Method } from '@stencil/core';
import { VideoPlayer } from '../../types/VideoPlayerTypes';
export class TeliaVideoPlayer {
  constructor() {
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-video-player';
    this.setVideoRef = (element) => {
      this.videoElement = element;
    };
  }
  /**
   * Play html video.
   */
  async play() {
    var _a;
    if (typeof ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.play) === 'function') {
      this.videoElement.play();
    }
  }
  /**
   * Pause html video.
   */
  async pause() {
    var _a;
    if (typeof ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.pause) === 'function') {
      this.videoElement.pause();
    }
  }
  /**
   * Validate and return optional subtitles
   * @private
   * @returns `Array<VideoSubtitles>`
   */
  getHTML5VideoSubtitles() {
    if (Array.isArray(this.subtitles)) {
      return this.subtitles;
    }
    try {
      return this.subtitles && JSON.parse(this.subtitles);
    }
    catch (e) {
      console.error('Telia Video Player: please provide a valid subtitles JSON string');
      return undefined;
    }
  }
  /**
   * Validate, compose and return vimeo source with query parameters as settings
   * @private
   * @returns `string`
   */
  getActiveVimeoSourceSettings() {
    var _a;
    let videoSource = this.src;
    if ((_a = this.src) === null || _a === void 0 ? void 0 : _a.includes('https://player.vimeo.com/video/')) {
      const vimeoUrl = new URL(this.src);
      const predefinedParams = new URLSearchParams(vimeoUrl.searchParams);
      let vimeoParams = new URLSearchParams();
      // h param needs to be included if the vimeo video is private
      if (predefinedParams.get('h')) {
        vimeoParams.append('h', predefinedParams.get('h'));
      }
      // remove vimeo video and account details
      this.applyVimeoParamSettings(vimeoParams, 'title', false);
      this.applyVimeoParamSettings(vimeoParams, 'byline', false);
      this.applyVimeoParamSettings(vimeoParams, 'portrait', false);
      this.applyVimeoParamSettings(vimeoParams, 'background', !this.controls);
      this.applyVimeoParamSettings(vimeoParams, 'autoplay', this.autoplay);
      this.applyVimeoParamSettings(vimeoParams, 'loop', this.loop);
      this.applyVimeoParamSettings(vimeoParams, 'muted', this.muted);
      videoSource = `${vimeoUrl.origin}${vimeoUrl.pathname}?${vimeoParams.toString()}`;
    }
    else {
      videoSource = undefined;
    }
    return videoSource;
  }
  applyVimeoParamSettings(params, name, value) {
    params.append(name, value ? '1' : '0');
  }
  render() {
    var _a;
    const componentClass = 'telia-video-player';
    return (h(Host, { class: componentClass, "data-testid": this.dataTestid },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      this.type === VideoPlayer.HTML5Video && (h("video", { autoplay: this.autoplay ? true : null, controls: this.controls, muted: this.muted, loop: this.loop, poster: this.poster, ref: this.setVideoRef, preload: this.preload, playsinline: true, 
        //@ts-ignore
        controlsList: "nodownload nofullscreen noremoteplayback noplaybackrate", disablepictureinpicture: true },
        h("source", { src: this.src, type: this.srcType }), (_a = this.getHTML5VideoSubtitles()) === null || _a === void 0 ? void 0 :
        _a.map(list => (h("track", { label: list.label, kind: "subtitles", srclang: list.srcLanguage, src: list.src, default: list.default }))))),
      this.type === VideoPlayer.Vimeo && (h("div", { class: componentClass + '__container' }, this.getActiveVimeoSourceSettings() ? (h("iframe", { title: this.iframeTitle, src: this.getActiveVimeoSourceSettings(), frameborder: "0", allow: "autoplay; fullscreen;" })) : (this.poster && h("telia-image", { src: this.poster }))))));
  }
  static get is() { return "telia-video-player"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-video-player.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-video-player.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VideoPlayerType",
        "resolved": "\"html\" | \"vimeo\"",
        "references": {
          "VideoPlayerType": {
            "location": "import",
            "path": "../../types/VideoPlayerTypes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies which type of player should be used"
      },
      "attribute": "type",
      "reflect": false
    },
    "src": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "GetAttributeType<'source', 'src'>",
        "resolved": "string",
        "references": {
          "GetAttributeType": {
            "location": "import",
            "path": "../../types/GetAttributeType"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the url path for Vimeo video or self-hosted video"
      },
      "attribute": "src",
      "reflect": false
    },
    "srcType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "GetAttributeType<'source', 'type'>",
        "resolved": "string",
        "references": {
          "GetAttributeType": {
            "location": "import",
            "path": "../../types/GetAttributeType"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies the 'type' attribute of the 'source' element."
      },
      "attribute": "src-type",
      "reflect": false
    },
    "controls": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Show or hide controls. **Vimeo account setting can override this property**"
      },
      "attribute": "controls",
      "reflect": false
    },
    "autoplay": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies if the the video automatically begins to play"
      },
      "attribute": "autoplay",
      "reflect": false
    },
    "muted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies if the audio should be silenced"
      },
      "attribute": "muted",
      "reflect": false
    },
    "loop": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies if the video should replay after reaching the end of video"
      },
      "attribute": "loop",
      "reflect": false
    },
    "poster": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies image to be shown while the video is loading. <br/>** Not supported for Vimeo**"
      },
      "attribute": "poster",
      "reflect": false
    },
    "subtitles": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Array<VideoSubtitles> | string",
        "resolved": "VideoSubtitles[] | string",
        "references": {
          "Array": {
            "location": "global"
          },
          "VideoSubtitles": {
            "location": "import",
            "path": "../../types/VideoSubtitles"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies subtitles source.<br/>** Not supported for Vimeo**"
      },
      "attribute": "subtitles",
      "reflect": false
    },
    "preload": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies lazyloading behavior [none | metadata | auto]. Default auto"
      },
      "attribute": "preload",
      "reflect": false
    },
    "iframeTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Specifies title for vimeo iframe embed"
      },
      "attribute": "iframe-title",
      "reflect": false
    }
  }; }
  static get methods() { return {
    "play": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Play html video.",
        "tags": []
      }
    },
    "pause": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Pause html video.",
        "tags": []
      }
    }
  }; }
}
