import { Component, State, Element, h, Prop, Watch } from '@stencil/core';
import { SparkleGlobal, MyGoalTemplate } from '../../../../util';
import { EnvironmentConfigService } from "../../../../services/environment/environment-config.service";
import { AssetsService } from "../../../../services/core/assets.service";
export class SparkleGoalForm {
  constructor() {
    this.title = {
      valid: false,
      value: ''
    };
    this.description = {
      valid: false,
      value: ''
    };
    this.category = {
      valid: false,
      value: ''
    };
    this.progress = 0;
    this.public = true;
    this.goalUpdateText = {
      valid: true,
      value: ''
    };
    this.submitted = false;
  }
  goalHanlder() {
    this.updateGoal();
  }
  ;
  componentWillLoad() {
    this.updateGoal();
  }
  updateGoal() {
    if (this.goal) {
      this.title = Object.assign(Object.assign({}, this.title), { value: this.goal.Title });
      this.description = Object.assign(Object.assign({}, this.description), { value: this.goal.Description });
      this.category = Object.assign(Object.assign({}, this.category), { value: this.goal.Category });
      this.progress = this.goal.Progress;
    }
  }
  handleTitle(ev) {
    this.validateTitle();
    this.title = Object.assign(Object.assign({}, this.title), { value: ev.target.value });
  }
  handleDescription(ev) {
    this.validateDescription();
    this.description = Object.assign(Object.assign({}, this.description), { value: ev.target.value });
  }
  handleCategory(ev) {
    this.validateCategoy();
    this.category = Object.assign(Object.assign({}, this.category), { value: ev.target.value });
  }
  handleGoalProgressInfo(ev) {
    this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { value: ev.target.value });
  }
  validateTitle() {
    if (this.title.value && this.title.value.length > 0) {
      this.title = Object.assign(Object.assign({}, this.title), { valid: true });
      return;
    }
    this.title = Object.assign(Object.assign({}, this.title), { valid: false });
  }
  validateDescription() {
    if (this.description.value && this.description.value.length > 0) {
      this.title = Object.assign(Object.assign({}, this.description), { valid: true });
      return;
    }
    this.description = Object.assign(Object.assign({}, this.description), { valid: false });
  }
  validateCategoy() {
    if (this.category.value && this.category.value.length > 0) {
      this.category = Object.assign(Object.assign({}, this.category), { valid: true });
      return;
    }
    this.category = Object.assign(Object.assign({}, this.category), { valid: false });
  }
  onSubmit(e) {
    e.preventDefault();
    console.log('clicked signup');
    this.validateTitle();
    this.validateDescription();
    this.validateCategoy();
    this.submitted = true;
    if (this.goal) {
      if (this.title.valid && this.description.valid && this.category.valid) {
        //update
      }
    }
    else {
      if (this.title.valid && this.description.valid && this.category.valid) {
        //add
      }
    }
  }
  async postToFeed() {
    this.submitted = true;
    const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
    const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
    var model = {
      CourseId: tocData.id,
      MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
      StudentAppDataId: this.goal.StudentAppDataId,
      PostText: MyGoalTemplate(this.goal.Title, this.goalUpdateText.value, this.progress),
      IsPublic: this.public,
      Percentage: this.progress,
      GoalText: this.goalUpdateText,
      IsProgress: true,
    };
    console.log(model);
    //this.store.dispatch(new fromRootStore.PostGoalProgress(model));
  }
  dismiss(data) {
    // dismiss the closest modal and optionally pass back data
    this.el.closest('ion-modal').dismiss({
      'dismissed': true
    });
  }
  renderEditBookingFields() {
    if (this.goal) {
      return (h("div", null,
        h("ion-item", null,
          h("ion-label", { position: "stacked", color: "primary" }, "Goal Progress Info"),
          h("ion-input", { name: "title", type: "text", value: this.goalUpdateText.value, onInput: (ev) => this.handleGoalProgressInfo(ev) })),
        h("ion-text", { color: "danger" },
          h("p", { hidden: this.goalUpdateText.valid || this.submitted === false, class: "ion-padding-start" }, "Goal Progress text is required")),
        h("ion-item", null,
          h("ion-label", { position: "stacked" }, "Progress"),
          h("ion-range", { value: this.progress, min: 1, max: 100, step: 1, snaps: true, pin: true, onIonChange: (e) => this.progress = +e.detail.value },
            h("ion-icon", { size: "small", slot: "start", name: "pulse" }),
            h("ion-icon", { name: "pulse", size: "small" }),
            h("strong", { slot: "end" }, this.progress))),
        h("ion-text", { color: "danger" },
          h("p", { hidden: this.progress <= 0 || this.submitted === false, class: "ion-padding-start" }, "Min Progress value should be 1")),
        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 }))));
    }
  }
  render() {
    return [
      h("div", null,
        h("ion-toolbar", { color: "primary" },
          h("ion-buttons", { slot: "start" },
            h("ion-back-button", { defaultHref: "home", onClick: () => this.dismiss() })),
          h("ion-title", null, "Add New Goal")),
        h("form", { class: "ion-padding", novalidate: true, onSubmit: (e) => this.onSubmit(e) },
          h("ion-list", { "no-lines": true },
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Title"),
              h("ion-input", { name: "title", type: "text", value: this.title.value, onInput: (ev) => this.handleTitle(ev), required: true })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.title.valid || this.submitted === false, class: "ion-padding-start" }, "Title is required")),
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Description"),
              h("ion-textarea", { name: "desciption", value: this.description.value, onInput: (ev) => this.handleDescription(ev), required: true })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.description.valid || this.submitted === false, class: "ion-padding-start" }, "Description is required")),
            h("ion-item", null,
              h("ion-label", null, "Category"),
              h("ion-select", { value: this.category.value },
                h("ion-select-option", { value: "Emotional" }, "Emotional"),
                h("ion-select-option", { value: "Interpersonal" }, "Interpersonal"),
                h("ion-select-option", { value: "Learning" }, "Learning"),
                h("ion-select-option", { value: "Financial" }, "Financial"),
                h("ion-select-option", { value: "Physical" }, "Physical"))),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.category.valid || this.submitted === false, class: "ion-padding-start" }, "Category is required")),
            this.renderEditBookingFields()),
          h("div", { class: "ion-padding" },
            this.goal && h("ion-button", { type: "submit", expand: "block" }, "Update"),
            !this.goal && h("ion-button", { type: "submit", expand: "block" }, "Add"))))
    ];
  }
  static get is() { return "sparkle-goal-form"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-goal-form.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-goal-form.css"]
  }; }
  static get properties() { return {
    "goal": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "IGoal",
        "resolved": "IGoal",
        "references": {
          "IGoal": {
            "location": "import",
            "path": "../../../../models/goal.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "title": {},
    "description": {},
    "category": {},
    "progress": {},
    "public": {},
    "goalUpdateText": {},
    "submitted": {}
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "goal",
      "methodName": "goalHanlder"
    }]; }
}
