import { Component, State, Prop, Host, getAssetPath, h } from '@stencil/core';
import { SparkleGlobal, MyMoodTemplate, MyMoodTemplateJSON } from "../../../util";
import { EnvironmentConfigService } from "../../../services/environment/environment-config.service";
import { AssetsService } from "../../../services/core/assets.service";
import { FeedService } from '../../../services/feed.service';
import feedStore from '../../../stores/feed.store';
export class SparkleMood {
  constructor() {
    this.feelingItems = ["Anger", "Fear", "Disgust", "Happiness", "Sadness", "Suprise", "Neutral", "Anxiety", "Love", "Depression", "Contempt", "Pride", "Shame", "Envy"];
    this.intensityItems = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    this.locationItems = ["anger.jpg", "fear.jpg", "disgust.jpg", "happiness.jpg", "sadness.jpg", "neutral.jpg", "anxiety.jpg", "love.jpg", "depression.jpg", "contempt.jpg", "pride.jpg", "shame.jpg", "envy.jpg"];
    this.feeling = this.feelingItems[0];
    this.intensity = this.intensityItems[0];
    this.location = this.locationItems[0];
    this.public = true;
    this.submitted = false;
    this.currentStep = "FEELING";
  }
  back() {
    if (this.currentStep == "LOCATION") {
      this.currentStep = "INTENSITY";
    }
    else if (this.currentStep == "INTENSITY") {
      this.currentStep = "FEELING";
    }
  }
  async next() {
    if (this.currentStep == "FEELING") {
      this.currentStep = "INTENSITY";
    }
    else if (this.currentStep == "INTENSITY") {
      this.currentStep = "LOCATION";
    }
    else if (this.currentStep == "LOCATION") {
      const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
      const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
      var model = {
        CourseId: tocData.id,
        PostText: MyMoodTemplate(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
        PostTextJSON: MyMoodTemplateJSON(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
        ExternalResourceUrl: "",
        IsPublic: this.public,
        MiniAppId: SparkleGlobal.MY_MOOD_APP_ID,
      };
      const result = await FeedService.getInstance().createPost(model);
      if (result.Succeeded) {
        this.history.replace('/home');
      }
    }
  }
  render() {
    const buttonLabel = this.currentStep == "LOCATION" ? "SUBMIT" : "NEXT";
    return (h(Host, null,
      h("div", { class: `${this.currentStep == "FEELING" ? '' : 'hide'}` },
        h("ion-list", null,
          h("ion-radio-group", { name: "feeling", value: this.feeling, onIonChange: (ev) => this.feeling = ev.detail.value },
            h("ion-list-header", null,
              h("ion-label", null, "FEELING")),
            this.feelingItems.map((item) => h("ion-item", null,
              h("ion-label", null, item),
              h("ion-radio", { slot: "start", value: item })))))),
      h("div", { class: `${this.currentStep == "INTENSITY" ? '' : 'hide'}` },
        h("ion-list", null,
          h("ion-radio-group", { name: "intesity", value: this.intensity, onIonChange: (ev) => this.intensity = ev.detail.value },
            h("ion-list-header", null,
              h("ion-label", null, "INTENSITY")),
            this.intensityItems.map((item) => h("ion-item", null,
              h("ion-label", null, item),
              h("ion-radio", { slot: "start", value: item })))))),
      h("div", { class: `${this.currentStep == "LOCATION" ? '' : 'hide'}` },
        h("ion-list", null,
          h("ion-radio-group", { name: "location", value: this.location, onIonChange: (ev) => this.location = ev.detail.value },
            h("ion-list-header", null,
              h("ion-label", null,
                h("h3", null, "LOCATION"))),
            this.locationItems.map((item) => h("ion-item", null,
              h("ion-label", null,
                h("img", { src: getAssetPath(`../assets/img/mood/` + item) })),
              h("ion-radio", { slot: "start", value: item })))),
          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" },
        this.currentStep != "FEELING" && h("ion-button", { size: "default", slot: "start", onClick: () => this.back() }, "BACK"),
        h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.next(), disabled: feedStore.state.createPostLoading },
          feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }),
          buttonLabel))));
  }
  static get is() { return "sparkle-mood"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-mood.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-mood.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 {
    "loading": {},
    "feeling": {},
    "intensity": {},
    "location": {},
    "public": {},
    "submitted": {},
    "currentStep": {}
  }; }
}
