import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
import Swiper, { Keyboard, Navigation, HashNavigation, Pagination, Zoom } from 'swiper';
export class AkordSwiper {
  constructor() {
    /**
     * Slides per view
     */
    this.size = 1;
    /**
     * Slides per group
     */
    this.slidesPerGroup = 1;
    /**
     * Space between each slide
     */
    this.spaceBetween = 50;
    /**
     * Boolean to determine if pagination should be shown
     */
    this.showPagination = false;
    /**
   * Boolean to determine if navigation arrows should be shown next to pagination fraction
   */
    this.navigationPosition = 'bottom';
    /**
     * Boolean to determine if slides should be displayed in a loop
     */
    this.loop = true;
    /**
     * If true, then active slide will be centered, not always on the left side.
     */
    this.centeredSlides = false;
    /**
     * Add (in px) additional slide offset in the beginning of the container (before all slides)
     */
    this.slidesOffsetBefore = 0;
    /**
     * Add (in px) additional slide offset in the end of the container (after all slides)
     */
    this.slidesOffsetAfter = 0;
    /**
     * JSON string which will be parsed as breakpoint option
     */
    this.breakpoints = null;
  }
  async getCurrentSlide() {
    return this.swiper.activeIndex;
  }
  async destroy() {
    return this.swiper.destroy();
  }
  componentDidLoad() {
    this.initSwiper();
  }
  componentDidUpdate() {
    this.initSwiper();
  }
  initSwiper() {
    if (this.swiper) {
      this.swiper.destroy();
    }
    this.swiper = new Swiper(".akordSwiper", {
      modules: [Pagination, Navigation, HashNavigation, Keyboard, Zoom],
      //effect: "coverflow",
      keyboard: {
        enabled: true,
        onlyInViewport: false,
      },
      hashNavigation: {
        replaceState: true,
        watchState: true
      },
      zoom: true,
      loop: false,
      speed: 1000,
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: this.size,
      spaceBetween: this.spaceBetween,
      watchOverflow: true,
      pagination: this.showPagination ? {
        el: ".swiper-pagination",
        type: "fraction",
        clickable: true
      } : {},
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    this.swiper.on('transitionEnd', () => {
      this.activeSlideChanged.emit(this.swiper.activeIndex);
    });
    this.swiper.on('tap', (_s, e) => {
      if (!e.target.classList.contains("events-prevent")) {
        this.swiper.emit('doubleTap', e);
      }
    });
  }
  renderNavigationArrows() {
    return [
      h("div", { class: 'swiper-button-prev' +
          (this.navigationPosition === 'bottom' && this.showPagination ? ' nav-button-bottom-pag' :
            this.navigationPosition === 'bottom' ? ' nav-button-bottom' : '') },
        h("slot", { name: "swiper-prev" })),
      h("div", { class: 'swiper-button-next' +
          (this.navigationPosition === 'bottom' && this.showPagination ? ' nav-button-bottom-pag' :
            this.navigationPosition === 'bottom' ? ' nav-button-bottom' : '') },
        h("slot", { name: "swiper-next" }))
    ];
  }
  render() {
    return h(Host, null,
      h("div", { class: "swiper akordSwiper" },
        h("div", { class: "swiper-wrapper" },
          h("slot", null)),
        h("slot", { name: "bottom" }),
        h("div", { style: { display: 'flex', justifyContent: 'center', position: 'initial' } },
          this.showPagination ?
            h("div", { class: "swiper-pagination" }) : '',
          this.renderNavigationArrows())));
  }
  static get is() { return "akord-swiper"; }
  static get originalStyleUrls() { return {
    "$": ["./akord-swiper.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["akord-swiper.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | 'auto'",
        "resolved": "\"auto\" | number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Slides per view"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "1"
    },
    "slidesPerGroup": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Slides per group"
      },
      "attribute": "slides-per-group",
      "reflect": false,
      "defaultValue": "1"
    },
    "spaceBetween": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Space between each slide"
      },
      "attribute": "space-between",
      "reflect": false,
      "defaultValue": "50"
    },
    "showPagination": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Boolean to determine if pagination should be shown"
      },
      "attribute": "show-pagination",
      "reflect": false,
      "defaultValue": "false"
    },
    "navigationPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'center' | 'bottom'",
        "resolved": "\"bottom\" | \"center\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Boolean to determine if navigation arrows should be shown next to pagination fraction"
      },
      "attribute": "navigation-position",
      "reflect": false,
      "defaultValue": "'bottom'"
    },
    "loop": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Boolean to determine if slides should be displayed in a loop"
      },
      "attribute": "loop",
      "reflect": false,
      "defaultValue": "true"
    },
    "centeredSlides": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If true, then active slide will be centered, not always on the left side."
      },
      "attribute": "centered-slides",
      "reflect": false,
      "defaultValue": "false"
    },
    "slidesOffsetBefore": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Add (in px) additional slide offset in the beginning of the container (before all slides)"
      },
      "attribute": "slides-offset-before",
      "reflect": false,
      "defaultValue": "0"
    },
    "slidesOffsetAfter": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Add (in px) additional slide offset in the end of the container (after all slides)"
      },
      "attribute": "slides-offset-after",
      "reflect": false,
      "defaultValue": "0"
    },
    "breakpoints": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "JSON string which will be parsed as breakpoint option"
      },
      "attribute": "breakpoints",
      "reflect": false,
      "defaultValue": "null"
    }
  }; }
  static get events() { return [{
      "method": "activeSlideChanged",
      "name": "activeSlideChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "getCurrentSlide": {
      "complexType": {
        "signature": "() => Promise<number>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<number>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "destroy": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
