import { Component, Host, h, Prop, getAssetPath } from '@stencil/core';
import { modalController } from "@ionic/core";
export class SparkleGwwItem {
  async presentModal(comments) {
    const modal = await modalController.create({
      component: "sparkle-gww-comment-list",
      componentProps: { comments: comments }
    });
    await modal.present();
  }
  postComment() {
  }
  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,
              " ",
              this.post.Created))),
        h("div", { slot: "end" },
          h("ion-icon", { color: "primary", name: this.post.IsPublic ? "globe-outline" : "eye-outline" }))),
      h("div", { class: "ion-padding" },
        h("div", { innerHTML: this.post.PostText }),
        this.post.ExternalResourceUrl && h("div", null,
          h("img", { src: this.post.ExternalResourceUrl, class: "external-src-image" }))),
      h("hr", null),
      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", { type: "text", placeholder: "Write a comment" }),
          h("ion-button", { onClick: () => this.postComment(), slot: "end", size: "small" }, "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": ""
      }
    }
  }; }
}
