import { r as registerInstance, B as Build, h } from './index-31949dc5.js';
import { m as modalController } from './overlays-291bc7b7.js';
import './ionic-global-70d3ca26.js';
import './helpers-06537f39.js';

const appAlertListCss = "";

const AppAlertList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.locationId = undefined;
    this.alerts = [];
    this.paginationEl = undefined;
    this.filters = {};
  }
  async componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    (await modalController.create({
      component: "modal-flow",
      componentProps: {
        headerTitle: "Add an Alert",
        steps: [
          {
            fields: [
              {
                beforeHTML: "<h1>What is the subject of the email?</h1>",
                name: "subject",
              },
            ],
          },
          {
            fields: [
              {
                beforeHTML: "<h1>What is the type of alert?</h1>",
                name: "type",
                type: "radios",
                value: "email",
                options: [
                  {
                    label: "Email",
                    value: "email",
                  },
                  {
                    label: "Feed Card",
                    value: "feed",
                  },
                ],
              },
            ],
          },
        ],
      },
    })).present();
  }
  render() {
    return [
      h("ion-content", { class: "ion-padding" }, h("floodteam-title-bar", null, h("ion-router-link", { href: "/alerts" }, "Alerts"), h("ion-buttons", { slot: "end" }, h("ion-button", { fill: "solid", color: "primary", href: "/alerts/new" }, "Add"))), h("div", { class: "ion-padding" }, h("fireenjin-search-bar", { ref: (el) => (this.filterBarEl = el), paginationEl: this.paginationEl, filters: [
          {
            name: "locationId",
            label: "Location",
            endpoint: "listLocations",
            value: this.locationId,
            icon: "business",
            resultsKey: "locations",
          },
        ] })), h("ion-card", { class: "list-card" }, h("ion-card-content", null, h("ion-list", null, this.alerts.map((alert) => {
        var _a, _b, _c, _d, _e;
        return (h("ion-item", null, h("div", { slot: "start" }, ((_a = alert === null || alert === void 0 ? void 0 : alert.types) === null || _a === void 0 ? void 0 : _a.includes("email")) ? (h("ion-icon", { name: "mail" })) : null), h("ion-label", null, h("h2", null, (_b = alert === null || alert === void 0 ? void 0 : alert.template) === null || _b === void 0 ? void 0 : _b.subject), h("p", null, "Sent to", " ", ((_c = alert === null || alert === void 0 ? void 0 : alert.emails) === null || _c === void 0 ? void 0 : _c.length)
          ? `${alert.emails.length} Emails`
          : "", " ", ((_d = alert === null || alert === void 0 ? void 0 : alert.userIds) === null || _d === void 0 ? void 0 : _d.length)
          ? `${((_e = alert === null || alert === void 0 ? void 0 : alert.emails) === null || _e === void 0 ? void 0 : _e.length) ? "and " : ""}${alert.userIds.length} Users`
          : ""))));
      }))))),
      h("floodteam-navigation-footer", null),
    ];
  }
};
AppAlertList.style = appAlertListCss;

export { AppAlertList as app_alert_list };
