import { Component, Host, h, Prop, getAssetPath, State, Listen } from '@stencil/core';
import { PostVisibility } from "../../../../models/class.model";
import { modalController } from "@ionic/core";
import { date, SparkleGlobal } from '../../../../util';
export class SparkleGwwItem {
  async presentModal(comments) {
    const modal = await modalController.create({
      component: "sparkle-gww-comment-list",
      componentProps: { comments: comments }
    });
    await modal.present();
  }
  clearCommentField() {
    this.comment = "";
  }
  renderMyMoodTemplate(data) {
    return (h("div", null,
      h("b", null, "Mood:"),
      " ",
      data.Mood,
      h("br", null),
      h("b", null, "Level:"),
      " ",
      data.Level,
      h("br", null),
      h("img", { src: data.MoodImage }),
      "`"));
  }
  renderMyHealthTemplate(data) {
    return (h("div", null,
      h("b", null, "Heart rate:"),
      " ",
      data.HeartRate,
      " bpm "));
  }
  renderMyGoalTemplate(data) {
    return (h("div", null,
      h("b", null, "Goal: "),
      " ",
      data.GoalTitle,
      " ",
      h("br", null),
      h("b", null, "Update Text: "),
      " ",
      data.GoalText,
      " ",
      h("br", null),
      h("sparkle-goal-progress", { percentage: data.GoalProgress })));
  }
  renderTemplate() {
    if (this.post.PostTextJSON) {
      var parseData = JSON.parse(this.post.PostTextJSON);
      if (this.post.MiniAppId == SparkleGlobal.MY_GOALS_APP_ID) {
        return this.renderMyGoalTemplate(parseData);
      }
      else if (this.post.MiniAppId == SparkleGlobal.MY_HEALTH_APP_ID) {
        return this.renderMyHealthTemplate(parseData);
      }
      else if (this.post.MiniAppId == SparkleGlobal.MY_MOOD_APP_ID) {
        return this.renderMyMoodTemplate(parseData);
      }
    }
    else {
      return ([
        h("div", { innerHTML: this.post.PostText }),
        this.post.ExternalResourceUrl && h("div", null,
          h("img", { src: this.post.ExternalResourceUrl, class: "external-src-image" }))
      ]);
    }
  }
  render() {
    return (h(Host, { class: {
        'Card': true,
      } },
      h("ion-item", { class: "header-item" },
        h("ion-avatar", { class: "header-avatar", slot: "start" },
          h("img", { src: this.post.ProfileImageUrl ? this.post.ProfileImageUrl : getAssetPath("/assets/img/user.png") })),
        h("div", null,
          h("strong", { class: "requester-name", "text-capitalize": true }, this.post.Name),
          h("div", null,
            h("small", null,
              " ",
              date(this.post.CreatedOn)))),
        h("div", { slot: "end" },
          h("ion-icon", { color: "primary", name: this.post.PostVisibility == PostVisibility.Public ? "globe-outline" : "eye-outline" }))),
      h("div", { class: "ion-padding" }, this.renderTemplate()),
      h("div", { class: "footer" },
        this.post.Comments.length > 0 &&
          h("div", { class: "comment-overview", slot: "end" },
            " ",
            h("small", { onClick: () => this.post.Comments.length > 0 && this.presentModal(this.post.Comments) },
              "Comments (",
              this.post.Comments.length,
              ")")),
        this.post.Comments.map((item) => {
          h("ion-item", { class: "comment-box", onClick: () => this.presentModal(this.post.Comments) },
            h("ion-avatar", { class: "footer-avatar", slot: "start" },
              h("img", { src: item.ProfileImageUrl ? item.ProfileImageUrl : "/assets/img/user.png" })),
            h("small", null,
              h("b", null, item.Name),
              " ",
              item.Comment),
            h("ion-icon", { slot: "end", name: "git-merge", color: "primary" }));
        }),
        h("hr", null),
        h("ion-item", { class: "comment-footer" },
          h("ion-avatar", { class: "footer-avatar", slot: "start" },
            h("img", { src: getAssetPath("/assets/img/user.png") })),
          h("ion-input", { value: this.comment, onIonChange: (e) => this.comment = e.target.value, type: "text", placeholder: "Write a comment" }),
          h("ion-button", { onClick: () => this.onPostComment({ Comment: this.comment, PostId: this.post.Id }), slot: "end", size: "small", disabled: !this.comment || this.loading }, this.loading ? h("ion-spinner", { name: "dots" }) : "POST COMMENT")))));
  }
  static get is() { return "sparkle-gww-item"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-gww-item.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-gww-item.css"]
  }; }
  static get properties() { return {
    "post": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "ClassFeedPostViewModel",
        "resolved": "ClassFeedPostViewModel",
        "references": {
          "ClassFeedPostViewModel": {
            "location": "import",
            "path": "../../../../models/class.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "onPostComment": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Function",
        "resolved": "Function",
        "references": {
          "Function": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "loading",
      "reflect": false
    }
  }; }
  static get states() { return {
    "comment": {}
  }; }
  static get listeners() { return [{
      "name": "commentPosted",
      "method": "clearCommentField",
      "target": "body",
      "capture": false,
      "passive": false
    }]; }
}
