import { r as registerInstance, d as createEvent, B as Build, h } from './index-26447f8a.js';
import { t as toastController, p as popoverController } from './overlays-a3190093.js';
import { s as state } from './store-838a3050.js';
import './ionic-global-b53b5faa.js';
import './helpers-06537f39.js';
import './index-b0d3ac50.js';
import './getHandlebarsHelpers-0376b57c.js';
import './_commonjsHelpers-7c4ea794.js';
import './index-e6b3332e.js';
import './localforage-c63d55c8.js';

const modalSearchUsersCss = "modal-search-users .banner{background-color:var(--ion-color-secondary)}modal-search-users h1{color:#fff}modal-search-users p{margin:0 0 15px 0;color:rgba(255, 255, 255, 0.8);font-weight:normal}@media only screen and (max-width: 800px){.modal-search-users{--width:100%;--max-width:auto}}";

const UserItem = ({ user, selectedIds, toggleSelect, openPopover }) => (h("ion-item", null, h("ion-checkbox", { slot: "start", checked: selectedIds.includes(user.id), onClick: (event) => toggleSelect(event, user) }), h("fireenjin-avatar", { src: user.photo, style: { marginRight: "15px" }, initials: `${(user === null || user === void 0 ? void 0 : user.firstName) ? user.firstName.charAt(0) : ""}${(user === null || user === void 0 ? void 0 : user.lastName) ? user.lastName.charAt(0) : ""}` }), h("ion-label", null, h("h4", null, (user === null || user === void 0 ? void 0 : user.firstName) || "", " ", (user === null || user === void 0 ? void 0 : user.lastName) || ""), (user === null || user === void 0 ? void 0 : user.tags) ? user.tags.map((tag) => h("ion-chip", null, tag)) : null), h("ion-button", { fill: "clear", slot: "end", color: "medium", onClick: (event) => openPopover(event, user) }, h("ion-icon", { name: "ellipsis-vertical", slot: "icon-only" }))));
const ModalSearchUsers = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.floodteamCloseModal = createEvent(this, "floodteamCloseModal", 7);
    this.fireenjinFetch = createEvent(this, "fireenjinFetch", 7);
    this.fireenjinSubmit = createEvent(this, "fireenjinSubmit", 7);
    var _a, _b;
    this.steps = ["search", "team", "recent"];
    this.heading = "Tie a User";
    this.payModels = [];
    this.query = undefined;
    this.job = undefined;
    this.tab = "team";
    this.team = [];
    this.loading = false;
    this.paginationEl = undefined;
    this.fetchData = {
      locationId: (_b = (_a = state === null || state === void 0 ? void 0 : state.profile) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.id,
    };
    this.selectedIds = [];
  }
  onChange(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "ION-SEGMENT") {
      this.tab = event.target.value;
    }
  }
  onReset(event) {
    var _a;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "editJob") {
      const modalEl = document.querySelector("ion-modal.modal-edit-job");
      if (modalEl === null || modalEl === void 0 ? void 0 : modalEl.dismiss) {
        modalEl.dismiss();
      }
    }
  }
  async onSuccess(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addUser") {
      console.log(event.detail);
      if ((_d = (_c = (_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.addUser) === null || _d === void 0 ? void 0 : _d.id)
        this.selectedIds.push(event.detail.data.addUser.id);
      this.tab = "team";
      await this.save();
    }
    else if (((_e = event.detail) === null || _e === void 0 ? void 0 : _e.endpoint) === "editJob") {
      const photoCarouselModalEl = document.querySelector("ion-modal.modal-edit-job");
      if (photoCarouselModalEl === null || photoCarouselModalEl === void 0 ? void 0 : photoCarouselModalEl.dismiss) {
        await photoCarouselModalEl.dismiss();
        this.presentToast();
      }
    }
    else if (((_f = event.detail) === null || _f === void 0 ? void 0 : _f.endpoint) === "listUsers" &&
      ((_g = event === null || event === void 0 ? void 0 : event.detail) === null || _g === void 0 ? void 0 : _g.name) === "team") {
      this.team = ((_j = (_h = event.detail) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.users) ? event.detail.data.users : [];
    }
  }
  onTabClick(tabName) {
    console.log(tabName);
  }
  async presentToast() {
    const toast = await toastController.create({
      message: `Job has been edited successfully!`,
      duration: 2000,
    });
    toast.present();
  }
  toggleSelect(event, user) {
    event.stopPropagation();
    event.preventDefault();
    this.selectedIds = this.selectedIds.includes(user.id)
      ? this.selectedIds.filter((selectedId) => user.id !== selectedId)
      : [...new Set([...this.selectedIds, user.id])];
  }
  async openPopover(event, user) {
    event.preventDefault();
    event.stopPropagation();
    const popover = await popoverController.create({
      component: "popover-user",
      cssClass: "popover-user-wrapper",
      componentProps: { user },
      event,
    });
    return await popover.present();
  }
  async save() {
    var _a, _b, _c;
    if (this.tab === "add") {
      this.userFormEl.querySelector("fireenjin-form").submit();
      return;
    }
    if (!((_a = this.selectedIds) === null || _a === void 0 ? void 0 : _a.length))
      return;
    this.loading = true;
    this.fireenjinSubmit.emit({
      endpoint: ((_b = this.job) === null || _b === void 0 ? void 0 : _b.id) ? "addUserToJob" : "selectUsers",
      data: {
        userId: this.selectedIds,
        jobId: (_c = this.job) === null || _c === void 0 ? void 0 : _c.id,
      },
    });
    this.loading = false;
    this.floodteamCloseModal.emit();
  }
  componentDidLoad() {
    var _a;
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.fireenjinFetch.emit({
      endpoint: "listUsers",
      name: "team",
      params: {
        data: {
          locationId: (_a = state === null || state === void 0 ? void 0 : state.claims) === null || _a === void 0 ? void 0 : _a.locationId,
          roles: [
            "tech",
            "marketing",
            "franchisee",
            "operations",
            "vision",
            "success",
            "mitigation",
            "finance",
            "design",
          ],
        },
      },
    });
  }
  render() {
    var _a, _b, _c;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.heading), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.save(), color: "primary", fill: "solid" }, "Save"), h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" })))), h("ion-segment", { scrollable: true, value: this.tab || "team" }, h("ion-segment-button", { value: "team", layout: "icon-end" }, h("ion-icon", { name: "people" }), h("ion-label", null, "Team")), h("ion-segment-button", { value: "search", layout: "icon-end" }, h("ion-icon", { name: "search" }), h("ion-label", null, "Search")), h("ion-segment-button", { value: "add", layout: "icon-end" }, h("ion-icon", { name: "add-circle" }), h("ion-label", null, "Add")))),
      h("ion-content", { class: { "ion-padding-horizontal": true, "is-loading": this.loading } }, h("ion-grid", null, h("ion-row", { id: "user-team", style: {
          display: this.tab === "team" ? "block" : "none",
        } }, h("ion-col", null, h("ion-card", { class: "list-card" }, h("ion-list", { class: "ion-no-padding" }, h("ion-item-divider", null, "My Team"), (this.team || []).map((user) => (h(UserItem, { user: user, selectedIds: this.selectedIds, openPopover: this.openPopover.bind(this), toggleSelect: this.toggleSelect.bind(this) }))))))), h("ion-row", { id: "user-search", style: {
          display: this.tab === "search" ? "block" : "none",
        } }, h("ion-col", null, h("fireenjin-search-bar", { ref: (el) => (this.filterBarEl = el), paginationEl: this.paginationEl, filters: [
          {
            name: "locationId",
            label: "Location",
            icon: "business",
            options: (state === null || state === void 0 ? void 0 : state.locations)
              ? state.locations.map((location) => ({
                label: location.name,
                value: location.id,
              }))
              : [],
            value: ((_a = state === null || state === void 0 ? void 0 : state.claims) === null || _a === void 0 ? void 0 : _a.locationId) || ((_c = (_b = state === null || state === void 0 ? void 0 : state.profile) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.id),
          },
        ] }), h("fireenjin-pagination", { name: "user-search", display: "list", limit: 12, ref: (el) => (this.paginationEl = el), disableVirtualScroll: true, listEl: ({ result: user }) => (h(UserItem, { user: user, selectedIds: this.selectedIds, openPopover: this.openPopover.bind(this), toggleSelect: this.toggleSelect.bind(this) })), endpoint: "listUsers", fetchData: this.fetchData, resultsKey: "users", removeDuplicates: true }))), h("ion-row", { id: "user-add", style: {
          display: this.tab === "add" ? "block" : "none",
        } }, h("ion-col", null, h("floodteam-form-user", { ref: (el) => (this.userFormEl = el), userId: "new", hideControls: true }))))),
    ];
  }
};
ModalSearchUsers.style = modalSearchUsersCss;

export { ModalSearchUsers as modal_search_users };
