import { r as registerInstance, d as createEvent, B as Build, h } from './index-33e43734.js';
import { p as popoverController } from './overlays-85a0d940.js';
import './ionic-global-bd76bde2.js';
import './helpers-7e937ffa.js';

const modalSiteEditCss = "modal-site-edit .banner{background-color:var(--ion-color-secondary)}modal-site-edit h1{color:#fff}modal-site-edit floodteam-photo-carousel .fallback-wrapper{padding:50px 0}modal-site-edit fireenjin-select ion-select{--max-width:100% !important}modal-site-edit ion-badge.photo-pagination{padding-left:10px;left:40px}modal-site-edit p{margin:0 0 15px 0;color:rgba(255, 255, 255, 0.8);font-weight:normal}modal-site-edit form[name=\"areas\"] ion-item-divider ion-text{padding-right:10px}modal-site-edit .gallery-view{height:0px !important;width:100% !important;padding:0 !important;border:none !important;overflow:hidden !important;min-height:50px !important;max-height:50px !important}modal-site-edit .gallery-view ion-slides,modal-site-edit .gallery-view ion-badge{opacity:0;pointer-events:none}.modal-site-edit{--width:700px;--max-width:700px}@media only screen and (max-width: 800px){.modal-site-edit{--width:100%;--max-width:auto}}";

let ModalSiteEdit = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.floodteamCloseModal = createEvent(this, "floodteamCloseModal", 7);
    this.floodteamCloseToast = createEvent(this, "floodteamCloseToast", 7);
    this.fireenjinFetch = createEvent(this, "fireenjinFetch", 7);
    this.fireenjinTrigger = createEvent(this, "fireenjinTrigger", 7);
    this.steps = ["info", "photos", "areas", "dots"];
    this.isUploading = false;
    this.photo = {};
    this.viewGallery = true;
    this.showProgress = false;
    this.photoUploading = false;
  }
  async onSuccess(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addSite") {
      this.siteId = ((_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.addSite) === null || _d === void 0 ? void 0 : _d.id) || this.siteId;
    }
    else if (((_e = event.detail) === null || _e === void 0 ? void 0 : _e.endpoint) === "findJob") {
      if (!((_h = (_g = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.job) === null || _h === void 0 ? void 0 : _h.sites))
        return;
      this.sites = (((_l = (_k = (_j = event.detail) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.job) === null || _l === void 0 ? void 0 : _l.sites) || []).find((site) => (site === null || site === void 0 ? void 0 : site.id) === this.siteId);
    }
    else if (["addPhoto", "editPhoto"].includes((_m = event.detail) === null || _m === void 0 ? void 0 : _m.endpoint)) {
      this.fetchJob();
    }
    if (this.steps.includes(event.target.name)) {
      const nextTabName = this.steps[this.steps.indexOf(event.target.name) + 1];
      this.onTabClick(nextTabName);
      this.tabsEl.select(nextTabName);
    }
  }
  onUpload(event) {
    if (event.target.name === "photocarousel") {
      this.fetchSite();
    }
  }
  onSelect(event) {
    var _a;
    this.site = ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.site) ? event.detail.site : {};
    this.siteSelectPopoverEl.dismiss();
    if (this.siteId)
      this.fetchSite();
  }
  onReset(event) {
    var _a;
    if (event.target.name === "info") {
      if (confirm("Are you sure you want to delete this site?")) {
        this.fireenjinFetch.emit({
          endpoint: "deleteSite",
          params: {
            id: this.siteId,
          },
        });
        this.floodteamCloseModal.emit();
      }
    }
    else if (this.steps.includes(event.target.name)) {
      const backTabName = this.steps[this.steps.indexOf(event.target.name) - 1];
      this.onTabClick(backTabName);
      this.tabsEl.select(backTabName);
    }
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addPhoto") {
      const modalEl = document.querySelector("ion-modal.modal-site-edit");
      if (modalEl === null || modalEl === void 0 ? void 0 : modalEl.dismiss) {
        modalEl.dismiss();
      }
    }
  }
  onChange(event) {
    if (event.target.name === "siteId") {
      this.fetchSite(event.target.value);
    }
  }
  onTabClick(tabName) {
    if (this.siteId)
      return;
    let stopUnderline = false;
    this.tabBarEl.querySelectorAll("ion-tab-button").forEach((tabButtonEl) => {
      tabButtonEl.style.borderBottom = "none";
      if (tabName === tabButtonEl.tab)
        stopUnderline = true;
      if (!stopUnderline)
        tabButtonEl.style.borderBottom = "2px solid var(--ion-color-success)";
    });
  }
  async openSiteSelect(event) {
    this.siteSelectPopoverEl = await popoverController.create({
      component: "popover-site-select",
      componentProps: {
        sites: this.sites || [],
      },
      event,
    });
    return this.siteSelectPopoverEl.present();
  }
  removeEquipment(equipment) {
    var _a;
    if (!confirm(`Are you sure you want to remove ${((_a = equipment === null || equipment === void 0 ? void 0 : equipment.service) === null || _a === void 0 ? void 0 : _a.name) ? equipment.service.name : "equipment"}?`))
      return;
    this.fireenjinFetch.emit({
      endpoint: "deleteSiteEquipment",
      params: {
        data: {
          id: equipment.id,
          siteId: this.siteId,
        },
      },
    });
  }
  toGalleryView(_event) {
    this.viewGallery = true;
  }
  async fetchJob() {
    if (this.jobId) {
      this.fireenjinFetch.emit({
        endpoint: "findJob",
        params: {
          id: this.jobId,
          withPayments: false,
          withUsers: true,
          withSites: true,
          withPayModel: true,
          withPhotos: true,
          withEfiles: true,
          withPayables: false,
          withReadings: false,
        },
      });
    }
  }
  fetchSite(siteId) {
    if (!siteId && !this.siteId)
      return;
    this.fireenjinFetch.emit({
      endpoint: "findSite",
      params: {
        id: siteId || this.siteId,
      },
    });
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    if (!this.siteId) {
      this.showProgress = true;
    }
    if (this.selectedTab) {
      setTimeout(() => {
        this.tabsEl.select(this.selectedTab);
      }, 200);
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-buttons", { slot: "start" }, h("ion-button", { onClick: (event) => this.openSiteSelect(event) }, h("ion-icon", { slot: "icon-only", name: "caret-down-circle-outline" }))), h("ion-title", null, ((_a = this.site) === null || _a === void 0 ? void 0 : _a.name) || "Add a Site"), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.floodteamCloseModal.emit(), style: {
          "--color": "var(--ion-text-color)",
          "--color-hover": "var(--ion-color-danger",
        } }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null, h("ion-tabs", { ref: (el) => (this.tabsEl = el) }, h("ion-tab-bar", { ref: (el) => (this.tabBarEl = el), slot: "top" }, h("ion-tab-button", { tab: "info", onClick: () => this.onTabClick("info") }, h("ion-icon", { name: "information-circle" }), h("ion-label", null, "Info")), h("ion-tab-button", { tab: "photos", onClick: () => this.onTabClick("photos") }, h("ion-icon", { name: "images" }), h("ion-label", null, "Photos"), h("ion-badge", null, ((_c = (_b = this.site) === null || _b === void 0 ? void 0 : _b.photos) === null || _c === void 0 ? void 0 : _c.length) || 0)), h("ion-tab-button", { tab: "areas", onClick: () => this.onTabClick("areas") }, h("ion-icon", { name: "cube" }), h("ion-label", null, "Areas"), h("ion-badge", null, ((_e = (_d = this.site) === null || _d === void 0 ? void 0 : _d.affectedAreas) === null || _e === void 0 ? void 0 : _e.length) || 0, "/", ((_g = (_f = this.site) === null || _f === void 0 ? void 0 : _f.areas) === null || _g === void 0 ? void 0 : _g.length) || 0)), h("ion-tab-button", { tab: "dots", onClick: () => this.onTabClick("dots") }, h("ion-icon", { name: "ellipse" }), h("ion-label", null, "Dots"), h("ion-badge", null, ((_j = (_h = this.site) === null || _h === void 0 ? void 0 : _h.services) === null || _j === void 0 ? void 0 : _j.length) || 0))), h("ion-tab", { tab: "info" }, h("ion-content", null, h("ion-card", null, h("floodteam-form-site-info", { site: this.site, jobId: this.jobId })))), h("ion-tab", { tab: "photos" }, h("ion-content", null, h("floodteam-photo-carousel", { class: {
          "is-loading": !!this.isUploading,
          "gallery-view": this.viewGallery,
        }, hideAddButton: !this.viewGallery, ref: (el) => (this.photoCarouselEl = el), photos: ((_k = this.site) === null || _k === void 0 ? void 0 : _k.photos) || [], jobId: this.jobId, siteId: this.siteId }), h("ion-grid", { style: this.viewGallery
          ? {
            display: "block",
          }
          : {
            display: "none",
          } }, h("ion-row", null, (((_l = this.site) === null || _l === void 0 ? void 0 : _l.photos) || []).map((photo, index) => (h("ion-col", { style: { cursor: "pointer" }, size: "4", onClick: async () => {
          await this.photoCarouselEl.slideTo(index + 1);
          this.viewGallery = false;
          setTimeout(async () => {
            await this.photoCarouselEl.update();
          }, 10);
        } }, h("ion-img", { src: ((photo === null || photo === void 0 ? void 0 : photo.url) || "")
          .replace(".jpeg", "_200x200.webp")
          .replace(".jpg", "_200x200.webp")
          .replace(".png", "_200x200.webp") })))))))), h("ion-tab", { tab: "areas" }, h("ion-content", null, h("ion-card", null, h("floodteam-form-site-areas", { jobId: this.jobId, siteId: this.siteId, site: this.site })))), h("ion-tab", { tab: "dots" }, h("ion-content", null, h("ion-card", null, h("ion-list", null, (_p = (_o = (_m = this.site) === null || _m === void 0 ? void 0 : _m.dots) === null || _o === void 0 ? void 0 : _o.map) === null || _p === void 0 ? void 0 : _p.call(_o, (dot) => (h("ion-item", null, h("ion-label", null, dot.name)))))))))),
      !this.viewGallery && (h("ion-footer", { collapse: "fade" }, h("ion-toolbar", null, h("fireenjin-form", { name: "photos", endpoint: ((_q = this.photo) === null || _q === void 0 ? void 0 : _q.id) ? "editPhoto" : "addPhoto", beforeSubmit: async (data) => ({
          jobId: this.jobId,
          siteId: this.siteId || null,
          ...data,
        }), submitButton: "Save", hideControls: true }, h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "3" }, !((_s = (_r = this.site) === null || _r === void 0 ? void 0 : _r.photos) === null || _s === void 0 ? void 0 : _s.length) ? null : (h("ion-button", { size: "small", class: "view-gallery", color: "light", onClick: (event) => this.toGalleryView(event) }, h("ion-icon", { name: "grid", slot: "start" }), "All"))), h("ion-col", { size: "4" }, h("ion-button", { onClick: (event) => this.fireenjinTrigger.emit({
          event,
          name: "move",
          type: "move",
          payload: {
            filter: true,
            onFilter: (event, inst) => {
              console.log(event, inst);
            },
            control: {
              name: "move",
              label: "Move To",
              icon: "arrow-redo",
              options: (this.sites || []).map((site) => ({
                label: site.name
                  ? site.name
                  : "No Site Name...",
                value: site.id,
              })),
              value: this.siteId,
            },
          },
        }), size: "small", color: "medium" }, "Move", h("ion-icon", { slot: "end", name: "arrow-redo" }))), h("ion-col", { size: "5" }, h("ion-button", { expand: "block", onClick: (event) => {
          var _a;
          return this.fireenjinTrigger.emit({
            event,
            name: "filter",
            type: "tags",
            payload: {
              filter: true,
              onFilter: (event, inst) => {
                console.log(event, inst);
              },
              control: {
                name: "tags",
                label: "Tags",
                icon: "pricetags",
                multiple: true,
                options: [
                  {
                    label: "Important",
                    value: "important",
                  },
                ],
                value: (_a = this.photo) === null || _a === void 0 ? void 0 : _a.tags,
              },
            },
          });
        }, size: "small", color: "primary", fill: "outline" }, (((_t = this.photo) === null || _t === void 0 ? void 0 : _t.tags) || []).join(", ") || "No Tags", h("ion-icon", { slot: "end", name: "pricetags" }))))))))),
    ];
  }
};
ModalSiteEdit.style = modalSiteEditCss;

export { ModalSiteEdit as modal_site_edit };

//# sourceMappingURL=modal-site-edit.entry.js.map