import { Component, State, Host, h } from '@stencil/core';
import { EnvironmentConfigService } from "../../../services/environment/environment-config.service";
import { AssetsService } from "../../../services/core/assets.service";
import { MyHealthTemplate, SparkleGlobal } from "../../../util";
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,
    };
    console.log(model);
    // this.store.dispatch(new fromRootStore.PostMood(model));
  }
  uploadImage(event) {
    this.submitted = true;
    if (event.target.files && event.target.files[0]) {
      //this.store.dispatch(new fromRootStore.UploadMediaImage(event.target.files))
    }
  }
  selectFile() {
  }
  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", null,
            h("img", { src: this.uploadedImageUrl })),
          h("ion-item", { lines: "none" },
            h("input", { type: "file", onChange: (ev) => this.uploadImage(ev), style: { display: "none" }, accept: "image/*" }),
            h("div", null,
              h("ion-button", { onClick: () => this.selectFile() }, "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() }, "POST"))))));
  }
  static get is() { return "sparkle-health"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-health.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-health.css"]
  }; }
  static get states() { return {
    "uploadedImageUrl": {},
    "heartRate": {},
    "public": {},
    "submitted": {}
  }; }
}
