import { Component, Element, Event, State, Prop, h, Host } from '@stencil/core';
import { MediaService } from '../../services/media.service';
export class SparkleFileUpload {
  constructor() {
    this.uploadImageLoading = false;
  }
  componentDidLoad() { }
  async uploadImage(evt) {
    this.uploadImageLoading = true;
    var files = evt.target.files;
    let result = await MediaService.getInstance().uploadImage(files);
    if (result.Succeeded) {
      console.log(result);
      this.uploadImageLoading = false;
      this.uploadedImage = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
      this.value = this.uploadedImage;
      this.fileUploaded.emit(this.uploadedImage);
    }
    else {
      this.uploadImageLoading = false;
      this.errorMessage = 'There is an error while uploading an image.';
    }
  }
  selectFile() {
    var fileInput = this.el.shadowRoot.querySelector('#fileInput');
    fileInput.click();
  }
  render() {
    return (h(Host, null,
      this.uploadedImage ? (h("ion-item", { class: "ion-padding", lines: "none" },
        h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''),
      h("ion-item", { lines: "none" },
        h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*,application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,text/plain" }),
        this.uploadImageLoading ? h("ion-spinner", { color: "primary" }) : '',
        h("ion-button", { slot: "start", onClick: evt => this.selectFile() },
          h("ion-icon", { name: "add" }),
          "Upload Image"))));
  }
  static get is() { return "sparkle-file-upload"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-file-upload.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-file-upload.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    }
  }; }
  static get states() { return {
    "errorMessage": {},
    "uploadedImage": {},
    "uploadImageLoading": {}
  }; }
  static get events() { return [{
      "method": "fileUploaded",
      "name": "fileUploaded",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
