import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
export class AkordAssetsGallery {
  constructor() {
    this.files = [
      { src: "/assets/test1.jpg", type: "image", name: "IMG_2079.jpg" },
      { src: "/assets/test3.jpg", type: "image", name: "test3.jpg" },
      { src: "/assets/test2.jpg", type: "image", name: "test2.jpg" },
      { src: "/assets/test.mp4", type: "video/mp4", name: "test.mp4" },
      { src: "/assets/test.pdf", type: "pdf", name: "test.pdf" },
      { src: "/assets/test.mp3", type: "audio", name: "test.mp3" },
      // { src: "/assets/test.doc", type: "doc", name: "test.doc" }
    ];
    this.mode = 'group';
    this.darkMode = true;
    this.printEnabled = true;
    this.downloadEnabled = 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];
  }
  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',
        top: '0px',
        left: '0px'
      } },
      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: "text-sec" }, this.assetsLocation)),
          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.mode === 'group' ?
              h("ion-button", { fill: "clear", size: "small", onClick: () => this.mode = 'single' },
                h("ion-icon", { slot: "icon-only", src: 'assets/single.svg' }))
              : '',
            this.mode === 'single' ?
              h("ion-button", { fill: "clear", size: "small", onClick: () => this.mode = 'group' },
                h("ion-icon", { slot: "icon-only", src: 'assets/group.svg' }))
              : '',
            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" },
              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", 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, 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: 'image' | 'video/mp4' | 'pdf' | 'doc' | 'audio'\n        name: string\n    }>",
        "resolved": "{ src: string; type: \"image\" | \"video/mp4\" | \"pdf\" | \"doc\" | \"audio\"; name: string; }[]",
        "references": {
          "Array": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[\n            { src: \"/assets/test1.jpg\", type: \"image\", name: \"IMG_2079.jpg\" },\n            { src: \"/assets/test3.jpg\", type: \"image\", name: \"test3.jpg\" },\n            { src: \"/assets/test2.jpg\", type: \"image\", name: \"test2.jpg\" },\n            { src: \"/assets/test.mp4\", type: \"video/mp4\", name: \"test.mp4\" },\n            { src: \"/assets/test.pdf\", type: \"pdf\", name: \"test.pdf\" },\n            { src: \"/assets/test.mp3\", type: \"audio\", name: \"test.mp3\" },\n           // { src: \"/assets/test.doc\", type: \"doc\", name: \"test.doc\" }\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"
    },
    "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
    }]; }
}
