import { Component, Host, h, Element } from '@stencil/core';
import { State } from '@stencil/core/internal';
export class UxplVideoCarousel {
  constructor() {
    this.idx = 0;
  }
  componentWillLoad() {
    var _a;
    this.videos = this.hostElement.querySelectorAll('uxpl-video');
    (_a = this.videos) === null || _a === void 0 ? void 0 : _a.forEach(vid => {
      vid.visible = false;
    });
    if (this.videos && this.videos.length > 0) {
      this.videos.item(this.idx).visible = true;
    }
  }
  get videosArr() {
    if (this.videos && this.videos.length > 0) {
      return Array.from(this.videos);
    }
    else {
      return [];
    }
  }
  get last() {
    if (this.idx === (this.videos.length - 1)) {
      return true;
    }
    else {
      return false;
    }
  }
  get first() {
    return this.idx === 0;
  }
  setIdx(idx) {
    var _a;
    this.idx = idx;
    (_a = this.videos) === null || _a === void 0 ? void 0 : _a.forEach(vid => {
      vid.visible = false;
    });
    this.videos.item(idx).visible = true;
  }
  next() {
    if (this.idx < (this.videos.length - 1)) {
      this.setIdx(this.idx + 1);
    }
  }
  previous() {
    if (this.idx !== 0) {
      this.setIdx(this.idx - 1);
    }
  }
  render() {
    if (this.videos && this.videos.length > 0) {
      return (h(Host, null,
        h("div", { class: "cards-container" },
          h("slot", null)),
        h("div", { class: "video-selector" },
          h("div", { class: {
              "video-navigator-control": true,
              "first": this.first
            }, onClick: () => this.previous() },
            h("uxpl-icon", { size: "20px", icon: "pl-icon-chevron-left", class: "carousel-ctrl prev-icon" }),
            h("span", null, "Previous")),
          h("div", { class: "video-selection-indicator" }, this.videosArr.map((_, idx) => h("uxpl-icon", { size: "10px", icon: idx === this.idx ? "ic-oval-filled" : "ic-oval-clear", onClick: () => this.setIdx(idx) }))),
          h("div", { class: {
              "video-navigator-control": true,
              "last": this.last,
              "next": true
            }, onClick: () => this.next() },
            h("span", null, "Next"),
            h("uxpl-icon", { size: "20px", icon: "pl-icon-chevron-right", class: "carousel-ctrl next-icon" })))));
    }
    else {
      undefined;
    }
  }
  static get is() { return "uxpl-video-carousel"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-video-carousel.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-video-carousel.css"]
  }; }
  static get states() { return {
    "idx": {}
  }; }
  static get elementRef() { return "hostElement"; }
}
