import { Component, Element, State, Method, h } from '@stencil/core';
export class SparkleCompassPost {
  constructor() {
    this.resiliance = 0;
    this.care = 0;
    this.compassData = {};
  }
  componentDidLoad() {
  }
  componentWillUpdate() {
    console.log('Component will update and re-render');
  }
  async renderCompass(data) {
    var sectionObj = {};
    for (var i = 0; i < data.length; i++) {
      if (data[i] && data[i].extraData && data[i].extraData.compass) {
        if (typeof sectionObj[data[i].extraData.compass] === 'undefined') {
          sectionObj[data[i].extraData.compass] = 0;
        }
        sectionObj[data[i].extraData.compass] += data[i].response || 0;
      }
    }
    for (var propertyName in sectionObj) {
      sectionObj[propertyName] = Math.floor(sectionObj[propertyName] * 0.25);
    }
    console.log(sectionObj);
  }
  loadOldData() {
    // this.dataSvc.getServerData("/api/compass/recent").subscribe((x) => {
    //   if (x && x.AppJsonData) {
    //     var obj = JSON.parse(x.AppJsonData)
    //     this.compassData = { ...this.compassData, ...obj };
    //     const compassCmp = this.el.querySelector('gi-compass') as HTMLGiCompassElement;
    //     compassCmp.drawOnCompass();
    //     // compassCmp.drawOnCompass()
    //   }
    // });
  }
  submitPost() {
    // this.errorMessage = "";
    // this.successMessage = "";
    // var previousEl = this.el.previousElementSibling as HTMLGiOpinionElement;
    // var data = previousEl.getQuizResults();
    // if (data.length == 8) {
    //   var sectionObj = {};
    //   for (var i = 0; i < data.length; i++) {
    //     if (data[i] && data[i].extraData && data[i].extraData.compass) {
    //       if (typeof sectionObj[data[i].extraData.compass] === 'undefined') {
    //         sectionObj[data[i].extraData.compass] = 0;
    //       }
    //       sectionObj[data[i].extraData.compass] += data[i].response;
    //     }
    //   }
    // this.dataSvc.getServerData("/api/compass/recent").subscribe(x => {
    //   combineObj = {};
    //   if (x && x.AppJsonData) {
    //     var oldObj = JSON.parse(x.AppJsonData);
    //     for (var propertyName in oldObj) {
    //       oldObj[propertyName] = Math.floor(oldObj[propertyName] * 4);
    //     }
    //     var combineObj = { ...oldObj, ...sectionObj };
    //   }
    //   else {
    //     combineObj = sectionObj;
    //   }
    //   var componentString = "<gi-compass";
    //   for (var propertyName in combineObj) {
    //     combineObj[propertyName] = Math.floor(combineObj[propertyName] * 0.25);
    //     componentString += ' ' + propertyName + '="' + combineObj[propertyName] + '"';
    //   }
    //   componentString += "></gi-compass>";
    //   var isPublic = this.el.getElementsByClassName("IsPublic")[0] as HTMLInputElement;
    //   var appJsonData = JSON.stringify(combineObj);
    //   var postData = {
    //     AppJsonData: appJsonData,
    //     PostText: componentString,
    //     ExternalResourceUrl: "",
    //     IsPublic: isPublic.checked,
    //   };
    //   console.log(postData);
    //   this.dataSvc.saveData(postData, "/api/compass/add/")
    //     .subscribe(x => {
    //       this.successMessage = "Posted Successfully";
    //     }, error => {
    //       this.errorMessage = "Something went wrong.";
    //     });
    // }, error => {
    //   this.errorMessage = "Something went wrong.";
    // });
    // }
    // else {
    //   this.errorMessage = "Please answer all of the above questions";
    // }
  }
  getTokenData() {
    let tokenStr = window.localStorage["currentUser"];
    if (tokenStr) {
      let token = JSON.parse(tokenStr);
      token = JSON.parse(token);
      if (new Date(token["Expiration"]).getTime() > new Date().getTime()) {
        return token;
      }
    }
    return null;
  }
  renderUserInfo() {
    var tokenInfo = this.getTokenData();
    if (tokenInfo != null && tokenInfo.Token) {
      return (h("ion-avatar", { class: "header-avatar", slot: "end" }, tokenInfo.ProfileImageUrl
        ? h("img", { src: tokenInfo.ProfileImageUrl })
        : h("img", { src: "/assets/img/avatar.png" })));
    }
    else {
      return (h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
    }
  }
  render() {
    const userInfo = this.renderUserInfo();
    return (h("div", { class: "compass-post" },
      h("div", { class: "compass-post-header" },
        "Bulletin Board",
        userInfo),
      h("div", { class: "compass-post-body" },
        h("form", null,
          h("ion-item", null,
            h("ion-label", null, "Public"),
            h("ion-radio", { class: "IsPublic", slot: "end", color: "primary", value: "IsPublic", name: "IsPublic" })),
          h("gi-compass", null),
          h("ion-item", { class: "footer" },
            h("div", null,
              h("div", { class: "error" }, this.errorMessage),
              h("div", { class: "success" }, this.successMessage)),
            h("ion-button", { slot: "end", size: "default", onClick: (evt) => this.submitPost(), disabled: this.getTokenData() == null }, "Post"))))));
  }
  static get is() { return "sparkle-compass-post"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-compass-post.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-compass-post.css"]
  }; }
  static get states() { return {
    "errorMessage": {},
    "successMessage": {},
    "resiliance": {},
    "care": {},
    "compassData": {}
  }; }
  static get methods() { return {
    "renderCompass": {
      "complexType": {
        "signature": "(data: any) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
