import { Component, Host, h, Prop } from '@stencil/core';
import { modalController } from '@ionic/core';
export class SparkleGoals {
  constructor() {
    this.goals = [
      {
        StudentAppDataId: 1,
        Title: "Save $50,000",
        Description: "By saving atleat $100 minimun a month before retirement",
        CategoryIcon: "/assets/img/home/my-mood.svg",
        Category: "Financial",
        Progress: 20
      },
      {
        StudentAppDataId: 2,
        Title: "Dream House",
        Description: "Building a house in the middle of a mountain, middle of nowhere",
        CategoryIcon: "/assets/img/home/find-help.svg",
        Category: "Financial",
        Progress: 50
      },
      {
        StudentAppDataId: 3,
        Title: "Retire By 35",
        Description: "By something to create passive income and retire by 35.",
        CategoryIcon: "/assets/img/home/my-goals.svg",
        Category: "Financial",
        Progress: 80
      }
    ];
  }
  async presentAddGoalModal(goal) {
    const modal = await modalController.create({
      component: "sparkle-goal-form",
      componentProps: { goal: goal }
    });
    await modal.present();
  }
  render() {
    return (h(Host, null,
      h("h2", null, "MY GOALS"),
      h("ion-item", { lines: "none" },
        h("ion-button", { size: "default", color: "primary", slot: "end", onClick: () => this.presentAddGoalModal(null) },
          h("ion-icon", { name: "add-outline" }),
          "Add")),
      h("div", { class: "ion-padding" },
        h("sparkle-cards", null, this.goals.map((goal) => h("div", { style: { "position": "relative" } },
          h("sparkle-goal-item", { goal: goal }),
          h("div", { style: { "position": "absolute", "top": "1.65em", "right": "2em" } },
            h("ion-button", { size: "small", color: "primary", onClick: () => this.presentAddGoalModal(goal) }, "Edit"))))))));
  }
  static get is() { return "sparkle-goals"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-goals.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-goals.css"]
  }; }
  static get properties() { return {
    "goals": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Array<IGoal>",
        "resolved": "IGoal[]",
        "references": {
          "Array": {
            "location": "global"
          },
          "IGoal": {
            "location": "import",
            "path": "../../../models/goal.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[\n    {\n      StudentAppDataId: 1,\n      Title: \"Save $50,000\",\n      Description: \"By saving atleat $100 minimun a month before retirement\",\n      CategoryIcon: \"/assets/img/home/my-mood.svg\",\n      Category: \"Financial\",\n      Progress: 20\n    },\n    {\n      StudentAppDataId: 2,\n      Title: \"Dream House\",\n      Description: \"Building a house in the middle of a mountain, middle of nowhere\",\n      CategoryIcon: \"/assets/img/home/find-help.svg\",\n      Category: \"Financial\",\n      Progress: 50\n    },\n    {\n      StudentAppDataId: 3,\n      Title: \"Retire By 35\",\n      Description: \"By something to create passive income and retire by 35.\",\n      CategoryIcon: \"/assets/img/home/my-goals.svg\",\n      Category: \"Financial\",\n      Progress: 80\n    }]"
    }
  }; }
}
