import { Component, State, Prop, Element, Host, h } from '@stencil/core';
import { EnvironmentConfigService } from "../../../services/environment/environment-config.service";
import { AssetsService } from "../../../services/core/assets.service";
import { MyHealthTemplate, MyHealthTemplateJSON, SparkleGlobal } from "../../../util";
import { FeedService } from '../../../services/feed.service';
import feedStore from '../../../stores/feed.store';
import { MediaService } from '../../../services/media.service';
import mediaStore from '../../../stores/media.store';
export class SparkleHealth {
  constructor() {
    this.uploadedImageUrl = "";
    this.heartRate = 0;
    this.public = true;
    this.submitted = false;
  }
  async postFeed() {
    const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
    const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
    var model = {
      PostText: MyHealthTemplate(this.heartRate),
      ExternalResourceUrl: this.uploadedImageUrl,
      IsPublic: this.public,
      MiniAppId: SparkleGlobal.MY_HEALTH_APP_ID,
      CourseId: tocData.id,
      PostTextJSON: MyHealthTemplateJSON(this.heartRate)
    };
    const result = await FeedService.getInstance().createPost(model);
    if (result.Succeeded) {
      this.history.replace('/home');
    }
  }
  async uploadImage(event) {
    this.submitted = true;
    console.log(event.target.files);
    if (event.target.files && event.target.files[0]) {
      const result = await MediaService.getInstance().uploadImage(event.target.files);
      if (result.Succeeded && result.Data && result.Data.length > 0) {
        this.uploadedImageUrl = result.Data[0].FullImageUrl;
        console.log(this.uploadedImageUrl);
      }
    }
  }
  selectFile() {
    this.el.querySelector("#fileInput").click();
  }
  render() {
    return (h(Host, null,
      h("div", null,
        h("h3", null, "MY HEALTH"),
        h("p", null, "This mini-app will help girls develop and instil good physical health habits"),
        h("ion-list", null,
          h("ion-list-header", null, "Select Heart Rate"),
          h("ion-item", { lines: "none" },
            h("ion-range", { min: 0, max: 150, step: 1, snaps: true, pin: true, onIonChange: (ev) => this.heartRate = +ev.detail.value },
              h("ion-icon", { size: "small", slot: "start", name: "pulse" }),
              h("ion-icon", { name: "pulse", size: "small" }),
              h("div", { slot: "end" },
                h("strong", null, this.heartRate)))),
          this.uploadedImageUrl && h("ion-item", { lines: "none" },
            h("img", { class: "health-image", src: this.uploadedImageUrl })),
          h("ion-item", { lines: "none" },
            h("input", { type: "file", id: "fileInput", onChange: (ev) => this.uploadImage(ev), style: { display: "none" }, accept: "image/*" }),
            h("div", null,
              h("ion-button", { onClick: () => this.selectFile(), disabled: mediaStore.state.mediaUploading },
                mediaStore.state.mediaUploading && h("ion-spinner", { name: "dots" }),
                "Upload Image"))),
          h("ion-item", { lines: "none" },
            h("ion-label", null, "Share to Community Wall"),
            h("ion-checkbox", { slot: "start", onChange: (ev) => this.public = ev.detail.checked, checked: true })),
          h("ion-item", { lines: "none" },
            h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.postFeed(), disabled: mediaStore.state.mediaUploading || feedStore.state.createPostLoading },
              feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }),
              " POST"))))));
  }
  static get is() { return "sparkle-health"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-health.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-health.css"]
  }; }
  static get properties() { return {
    "history": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "RouterHistory",
        "resolved": "RouterHistory",
        "references": {
          "RouterHistory": {
            "location": "import",
            "path": "@stencil/router"
          }
        }
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "uploadedImageUrl": {},
    "heartRate": {},
    "public": {},
    "submitted": {}
  }; }
  static get elementRef() { return "el"; }
}
