import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
export class AkordAssetsGallery {
  constructor() {
    this.files = [
      { src: "/assets/test1.jpg", type: "jpeg", name: "IMG_2079.jpg", hash: "hash1" },
      { src: "/assets/test3.jpg", type: "jpg", name: "test3.jpg", hash: "hash2" },
      { src: "/assets/test2.jpg", type: "jpg", name: "test2.jpg", hash: "hash3" },
      { src: "/assets/test.mp4", type: "mp4", name: "test.mp4", hash: "hash4" },
      { src: "/assets/test.pdf", type: "pdf", name: "test.pdf", hash: "hash5" },
      { src: "/assets/test.mp3", type: "mp3", name: "test.mp3", hash: "hash6" },
      { src: "/assets/test.mp3", type: "mp3", name: "test.mp3", hash: "hash7" }
    ];
    this.mode = 'group';
    this.darkMode = true;
    this.printEnabled = true;
    this.downloadEnabled = true;
    this.versionsEnabled = true;
    this.modeSwitchEnabled = true;
    this.darkModeSwitchEnabled = true;
    this.numberOfFiles = 0;
    this.activeFile = null;
    this.activeFileIndex = 0;
    this.fileViewers = [];
  }
  componentWillLoad() {
    this.numberOfFiles = this.files ? this.files.length : 0;
    this.activeFileIndex = this.files ? this.files.length : 0;
  }
  slideChangedHandler(event) {
    this.activeFileIndex = event.detail;
    this.activeFile = this.fileViewers[this.activeFileIndex];
  }
  errorHandler(event) {
    this.activeFileIndex = event.detail;
    this.activeFile = this.fileViewers[this.activeFileIndex];
  }
  onClose() {
    if (this.swiper) {
      this.swiper.destroy();
    }
    if (this.closeUrl) {
      window.location.href = this.closeUrl;
    }
    else {
      history.back();
    }
  }
  async print() {
    await this.activeFile.print();
  }
  async download() {
    await this.activeFile.download();
  }
  getHeight() {
    if (this.height === 'auto') {
      return window.innerHeight * 0.8;
    }
    return this.height;
  }
  render() {
    var _a, _b;
    return (h(Host, { style: {
        width: '100%',
        height: '100%',
        display: 'block',
        position: 'fixed',
        zIndex: '10000',
        top: '0px',
        left: '0px'
      } },
      h("div", { hidden: true, ref: (el) => this.errorElement = el },
        h("slot", { name: 'error-component' })),
      h("div", { class: this.darkMode ? 'dark-mode' : 'light-mode', style: { height: '100%' } },
        h("div", { class: "head" },
          h("div", { class: "file-name" },
            h("ion-icon", { src: '/assets/vault.svg' }),
            h("p", { class: "file-name-text text-sec" }, this.assetsLocation || 'test')),
          this.versionsEnabled && this.mode === 'single' ?
            h("div", { style: { width: '25%' } },
              h("ion-item", { color: 'primary', style: {
                  borderRadius: '4px',
                  transform: 'translateY(8px)',
                  '--border-width': '0',
                  '--show-full-highlight': '0'
                } },
                h("ion-icon", { src: "/assets/image.svg" }),
                h("ion-input", { class: "ion-text-right text-sec", style: {
                    marginLeft: '10px'
                  }, readonly: true, value: ((_a = this.activeFile) === null || _a === void 0 ? void 0 : _a.name) || this.files[0].name })))
            : '',
          h("div", { class: "menu" },
            this.modeSwitchEnabled ?
              this.mode === 'group' ?
                h("ion-button", { fill: "clear", size: "small", onClick: () => this.mode = 'single' },
                  h("ion-icon", { slot: "icon-only", src: '/assets/single.svg' }))
                : h("ion-button", { fill: "clear", size: "small", onClick: () => this.mode = 'group' },
                  h("ion-icon", { slot: "icon-only", src: '/assets/group.svg' }))
              : '',
            this.darkModeSwitchEnabled ?
              h("ion-button", { fill: "clear", size: "small", onClick: () => this.darkMode = !this.darkMode }, this.darkMode ?
                h("ion-icon", { slot: "icon-only", src: '/assets/light_mode.svg' })
                :
                  h("ion-icon", { slot: "icon-only", src: '/assets/dark_mode.svg' }))
              : '',
            this.printEnabled ?
              h("ion-button", { fill: "clear", size: "small", onClick: () => this.print() },
                h("ion-icon", { slot: "icon-only", src: '/assets/print.svg' }))
              : '',
            this.downloadEnabled ?
              h("ion-button", { fill: "clear", size: "small", onClick: () => this.download() },
                h("ion-icon", { slot: "icon-only", src: '/assets/download.svg' })) : '',
            h("ion-button", { fill: "clear", size: "small", class: "close", onClick: () => this.onClose() },
              h("ion-icon", { slot: "icon-only", src: '/assets/close.svg' })))),
        h("akord-swiper", { ref: (el) => this.swiper = el, showPagination: this.mode === 'group', navigationPosition: 'bottom', size: this.mode === 'single' ? 1 : 'auto', spaceBetween: 80, loop: false },
          this.files.map((file, idx) => (h("div", { class: "swiper-slide", "data-hash": file.hash, key: idx },
            h("akord-file-viewer", { src: file.src, type: file.type, name: file.name, zoomControlEnabled: this.mode === 'single' && idx === this.activeFileIndex, width: this.width, height: this.getHeight(), containerClass: "swiper-zoom-container", darkMode: this.darkMode, errorRef: this.errorElement, ref: (el) => this.fileViewers.push(el) })))),
          this.mode === 'group' ?
            h("ion-icon", { slot: "swiper-prev", style: { padding: '5px' }, src: '/assets/left.svg' }) :
            h("ion-icon", { slot: "swiper-prev", class: "icon-filled", style: { fontSize: '30px', borderRadius: '50%', padding: '5px' }, src: '/assets/arrow_left.svg' }),
          this.mode === 'group' ?
            h("ion-icon", { slot: "swiper-next", style: { padding: '5px' }, src: '/assets/right.svg' }) :
            h("ion-icon", { slot: "swiper-next", class: "icon-filled", style: { fontSize: '30px', borderRadius: '50%', padding: '5px' }, src: '/assets/arrow_right.svg' }),
          this.mode === 'group' ? h("div", { slot: "bottom" },
            h("p", { class: "text-sec", style: {
                textAlign: 'center'
              } }, ((_b = this.activeFile) === null || _b === void 0 ? void 0 : _b.name) || this.files[0].name)) : ''))));
  }
  static get is() { return "akord-assets-gallery"; }
  static get originalStyleUrls() { return {
    "$": ["akord-assets-gallery.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["akord-assets-gallery.css"]
  }; }
  static get properties() { return {
    "assetsLocation": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "assets-location",
      "reflect": false
    },
    "files": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Array<{\n        src: string\n        type: 'jpg' | 'jpeg' | 'gif' | 'bmp' | 'png' | 'mp4' | 'pdf' | 'doc' | 'mp3'\n        name: string\n        hash: string\n    }>",
        "resolved": "{ src: string; type: \"jpg\" | \"jpeg\" | \"gif\" | \"bmp\" | \"png\" | \"mp4\" | \"pdf\" | \"doc\" | \"mp3\"; name: string; hash: string; }[]",
        "references": {
          "Array": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[\n            { src: \"/assets/test1.jpg\", type: \"jpeg\", name: \"IMG_2079.jpg\", hash: \"hash1\" },\n            { src: \"/assets/test3.jpg\", type: \"jpg\", name: \"test3.jpg\", hash: \"hash2\" },\n            { src: \"/assets/test2.jpg\", type: \"jpg\", name: \"test2.jpg\", hash: \"hash3\" },\n            { src: \"/assets/test.mp4\", type: \"mp4\", name: \"test.mp4\", hash: \"hash4\" },\n            { src: \"/assets/test.pdf\", type: \"pdf\", name: \"test.pdf\", hash: \"hash5\" },\n            { src: \"/assets/test.mp3\", type: \"mp3\", name: \"test.mp3\", hash: \"hash6\" },\n            { src: \"/assets/test.mp3\", type: \"mp3\", name: \"test.mp3\", hash: \"hash7\" }\n        ]"
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "'single' | 'group'",
        "resolved": "\"group\" | \"single\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "'group'"
    },
    "darkMode": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "dark-mode",
      "reflect": false,
      "defaultValue": "true"
    },
    "printEnabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "print-enabled",
      "reflect": false,
      "defaultValue": "true"
    },
    "downloadEnabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "download-enabled",
      "reflect": false,
      "defaultValue": "true"
    },
    "versionsEnabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "versions-enabled",
      "reflect": false,
      "defaultValue": "true"
    },
    "modeSwitchEnabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode-switch-enabled",
      "reflect": false,
      "defaultValue": "true"
    },
    "darkModeSwitchEnabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "dark-mode-switch-enabled",
      "reflect": false,
      "defaultValue": "true"
    },
    "closeUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "close-url",
      "reflect": false
    },
    "width": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | 'auto'",
        "resolved": "\"auto\" | number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "height",
      "reflect": false
    }
  }; }
  static get states() { return {
    "numberOfFiles": {},
    "activeFile": {},
    "activeFileIndex": {}
  }; }
  static get listeners() { return [{
      "name": "activeSlideChanged",
      "method": "slideChangedHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "error",
      "method": "errorHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
