import { Component, Host, h } from '@stencil/core';
import { modalController } from '@ionic/core';
import { AppDataService } from '../../../services/appdata.service';
import goalStore from '../../../stores/goal.store';
export class SparkleGoals {
  async componentDidLoad() {
    await AppDataService.getInstance().getAllGoals();
  }
  async presentAddGoalModal(appData) {
    const modal = await modalController.create({
      component: "sparkle-goal-form",
      cssClass: "auto-height",
      componentProps: { appData }
    });
    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, goalStore.state.goals.map((goal) => h("div", { style: { "position": "relative" } },
          h("sparkle-goal-item", { goal: goal.AppData, onEditGoal: () => this.presentAddGoalModal(goal) })))),
        !goalStore.state.goalsLoading && goalStore.state.goals.length == 0
          && h("div", { class: "text-center" }, "No Goals"),
        goalStore.state.goalsLoading &&
          h("div", { class: "text-center" },
            h("ion-spinner", { name: "dots" })))));
  }
  static get is() { return "sparkle-goals"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-goals.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-goals.css"]
  }; }
}
