'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-e0385008.js');
const hardwareBackButton = require('./overlays-83fe75fb.js');
const store = require('./store-8d1de66f.js');
require('./ionic-global-45d4a7f7.js');
require('./helpers-905b0d22.js');
require('./index-37fc02d8.js');
require('./getHandlebarsHelpers-1b368c8a.js');
require('./_commonjsHelpers-a5111d61.js');
require('./index-ba857994.js');
require('./localforage-af1b8c0e.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 }) => (index.h("ion-item", null, index.h("ion-checkbox", { slot: "start", checked: selectedIds.includes(user.id), onClick: (event) => toggleSelect(event, user) }), index.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) : ""}` }), index.h("ion-label", null, index.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) => index.h("ion-chip", null, tag)) : null), index.h("ion-button", { fill: "clear", slot: "end", color: "medium", onClick: (event) => openPopover(event, user) }, index.h("ion-icon", { name: "ellipsis-vertical", slot: "icon-only" }))));
const ModalSearchUsers = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.floodteamCloseModal = index.createEvent(this, "floodteamCloseModal", 7);
    this.fireenjinFetch = index.createEvent(this, "fireenjinFetch", 7);
    this.fireenjinSubmit = index.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 = store.state === null || store.state === void 0 ? void 0 : store.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 hardwareBackButton.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 hardwareBackButton.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 (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    this.fireenjinFetch.emit({
      endpoint: "listUsers",
      name: "team",
      params: {
        data: {
          locationId: (_a = store.state === null || store.state === void 0 ? void 0 : store.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 [
      index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-title", null, this.heading), index.h("ion-buttons", { slot: "end" }, index.h("ion-button", { onClick: () => this.save(), color: "primary", fill: "solid" }, "Save"), index.h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, index.h("ion-icon", { slot: "icon-only", name: "close-circle-outline" })))), index.h("ion-segment", { scrollable: true, value: this.tab || "team" }, index.h("ion-segment-button", { value: "team", layout: "icon-end" }, index.h("ion-icon", { name: "people" }), index.h("ion-label", null, "Team")), index.h("ion-segment-button", { value: "search", layout: "icon-end" }, index.h("ion-icon", { name: "search" }), index.h("ion-label", null, "Search")), index.h("ion-segment-button", { value: "add", layout: "icon-end" }, index.h("ion-icon", { name: "add-circle" }), index.h("ion-label", null, "Add")))),
      index.h("ion-content", { class: { "ion-padding-horizontal": true, "is-loading": this.loading } }, index.h("ion-grid", null, index.h("ion-row", { id: "user-team", style: {
          display: this.tab === "team" ? "block" : "none",
        } }, index.h("ion-col", null, index.h("ion-card", { class: "list-card" }, index.h("ion-list", { class: "ion-no-padding" }, index.h("ion-item-divider", null, "My Team"), (this.team || []).map((user) => (index.h(UserItem, { user: user, selectedIds: this.selectedIds, openPopover: this.openPopover.bind(this), toggleSelect: this.toggleSelect.bind(this) }))))))), index.h("ion-row", { id: "user-search", style: {
          display: this.tab === "search" ? "block" : "none",
        } }, index.h("ion-col", null, index.h("fireenjin-search-bar", { ref: (el) => (this.filterBarEl = el), paginationEl: this.paginationEl, filters: [
          {
            name: "locationId",
            label: "Location",
            icon: "business",
            options: (store.state === null || store.state === void 0 ? void 0 : store.state.locations)
              ? store.state.locations.map((location) => ({
                label: location.name,
                value: location.id,
              }))
              : [],
            value: ((_a = store.state === null || store.state === void 0 ? void 0 : store.state.claims) === null || _a === void 0 ? void 0 : _a.locationId) || ((_c = (_b = store.state === null || store.state === void 0 ? void 0 : store.state.profile) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.id),
          },
        ] }), index.h("fireenjin-pagination", { name: "user-search", display: "list", limit: 12, ref: (el) => (this.paginationEl = el), disableVirtualScroll: true, listEl: ({ result: user }) => (index.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 }))), index.h("ion-row", { id: "user-add", style: {
          display: this.tab === "add" ? "block" : "none",
        } }, index.h("ion-col", null, index.h("floodteam-form-user", { ref: (el) => (this.userFormEl = el), userId: "new", hideControls: true }))))),
    ];
  }
};
ModalSearchUsers.style = modalSearchUsersCss;

exports.modal_search_users = ModalSearchUsers;
