import { Component, Prop, State, Watch, h } from '@stencil/core';
import Swiper, { Navigation } from 'swiper';
export class ScImageSlider {
  constructor() {
    this.images = [];
    this.thumbnails = [];
    this.thumbnailsPerPage = 5;
    /** Current Slide Index */
    this.currentSliderIndex = 0;
  }
  handleThumbPaginate() {
    if (!this.thumbsSwiper)
      return;
    const slideInView = this.currentSliderIndex >= this.thumbsSwiper.activeIndex && this.currentSliderIndex < this.thumbsSwiper.activeIndex + this.thumbnailsPerPage;
    if (!slideInView) {
      this.thumbsSwiper.slideTo(this.currentSliderIndex);
    }
  }
  componentDidLoad() {
    if (this.swiperContainerRef) {
      this.swiper = new Swiper(this.swiperContainerRef, {
        direction: 'horizontal',
        loop: false,
        on: {
          slideChange: swiper => {
            this.currentSliderIndex = swiper.activeIndex;
          },
        },
      });
    }
    if (this.swiperThumbsRef) {
      this.thumbsSwiper = new Swiper(this.swiperThumbsRef, {
        modules: [Navigation],
        direction: 'horizontal',
        loop: false,
        slidesPerView: this.thumbnailsPerPage,
        slidesPerGroup: this.thumbnailsPerPage,
        spaceBetween: 10,
        centerInsufficientSlides: true,
        slideToClickedSlide: true,
        navigation: {
          nextEl: this.next,
          prevEl: this.previous,
        },
      });
    }
  }
  disconnectedCallback() {
    this.swiper.destroy(true, true);
    this.thumbsSwiper.destroy(true, true);
  }
  render() {
    return (h("div", { class: "image-slider", part: "base" },
      h("div", { class: "swiper", ref: el => (this.swiperContainerRef = el) },
        h("div", { class: "swiper-wrapper" }, (this.images || []).map(({ src, alt, srcset, width }, index) => (h("div", { key: index, class: "swiper-slide image-slider__slider" },
          h("div", { class: "swiper-slide-img" },
            h("img", { src: src, alt: alt, srcset: srcset, width: width, loading: index > 0 ? 'lazy' : 'eager' }))))))),
      this.hasThumbnails && (h("div", { class: { 'image-slider__thumbs': true, 'image-slider__thumbs--has-navigation': this.images.length > 5 } },
        h("div", { class: "image-slider__navigation image-slider--is-prev", ref: el => (this.previous = el) },
          h("sc-icon", { name: "chevron-left" })),
        h("div", { class: "swiper", ref: el => (this.swiperThumbsRef = el) },
          h("div", { class: "swiper-wrapper" }, !!(this.thumbnails.length || this.images.length) &&
            (this.thumbnails || this.images).map(({ src, alt, srcset, width }, index) => (h("div", { class: { 'swiper-slide': true, 'image-slider__thumb': true, 'image-slider__thumb--is-active': this.currentSliderIndex === index }, onClick: () => { var _a, _b; return (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo) === null || _b === void 0 ? void 0 : _b.call(_a, index); } },
              h("img", { src: src, alt: alt, srcset: srcset, width: width, loading: index > this.thumbnailsPerPage - 1 ? 'lazy' : 'eager' })))))),
        h("div", { class: "image-slider__navigation image-slider--is-next", ref: el => (this.next = el) },
          h("sc-icon", { name: "chevron-right" }))))));
  }
  static get is() { return "sc-image-slider"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-image-slider.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-image-slider.css"]
  }; }
  static get properties() { return {
    "images": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "{ src: string; alt: string; srcset; width: number }[]",
        "resolved": "{ src: string; alt: string; srcset: any; width: number; }[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "thumbnails": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "{ src: string; alt: string; srcset; width: number }[]",
        "resolved": "{ src: string; alt: string; srcset: any; width: number; }[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "hasThumbnails": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "has-thumbnails",
      "reflect": false
    },
    "thumbnailsPerPage": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "thumbnails-per-page",
      "reflect": false,
      "defaultValue": "5"
    }
  }; }
  static get states() { return {
    "currentSliderIndex": {}
  }; }
  static get watchers() { return [{
      "propName": "currentSliderIndex",
      "methodName": "handleThumbPaginate"
    }]; }
}
