import { Component, Prop, h, Listen, Event, State, Build, } from "@stencil/core";
import state from "../../../store";
export class ModalSiteEdit {
  constructor() {
    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;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addSite") {
      console.log(event.detail);
      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) || null;
      state.site = ((_f = (_e = event === null || event === void 0 ? void 0 : event.detail) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.addSite) || null;
    }
    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);
    }
  }
  onReset(event) {
    var _a;
    if (event.target.name === "info") {
      if (confirm("Are you sure you want to delete this site?")) {
        this.fireenjinSubmit.emit({
          endpoint: "deleteSite",
          data: {
            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();
      }
    }
  }
  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)";
    });
  }
  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;
  }
  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-title", null, ((_a = state.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 = state.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 = state.site) === null || _d === void 0 ? void 0 : _d.affectedAreas) === null || _e === void 0 ? void 0 : _e.length) || 0,
                "/",
                ((_g = (_f = state.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 = state.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", { 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 = state.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 = state.site) === null || _l === void 0 ? void 0 : _l.photos) || []).map((photo, index) => {
                  var _a, _b;
                  return (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: ((_b = (_a = photo === null || photo === void 0 ? void 0 : photo.url) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, "api.floodteamms.com"))
                        ? photo.url
                        : ((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 })))),
          h("ion-tab", { tab: "dots" },
            h("ion-content", null,
              h("ion-card", null,
                h("ion-list", null, (_p = (_o = (_m = state.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", { style: { maxWidth: "100px", display: "flex" } },
                  h("ion-buttons", null,
                    !((_s = (_r = state.site) === null || _r === void 0 ? void 0 : _r.photos) === null || _s === void 0 ? void 0 : _s.length) ? null : (h("ion-button", { style: {
                        "--color-hover": "var(--ion-color-primary)",
                        "--background-hover": "transparent",
                      }, title: "View Gallery", class: "view-gallery", onClick: (event) => this.toGalleryView(event) },
                      h("ion-icon", { name: "grid", slot: "icon-only" }))),
                    h("ion-button", { title: "Move", style: {
                        "--color-hover": "var(--ion-color-primary)",
                        "--background-hover": "transparent",
                      }, onClick: (event) => {
                        var _a;
                        return 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: (((_a = state === null || state === void 0 ? void 0 : state.job) === null || _a === void 0 ? void 0 : _a.sites) || []).map((site) => ({
                                label: site.name
                                  ? site.name
                                  : "No Site Name...",
                                value: site.id,
                              })),
                              value: this.siteId,
                            },
                          },
                        });
                      } },
                      h("ion-icon", { slot: "icon-only", name: "arrow-redo" })))),
                h("ion-col", { style: {
                    display: "flex",
                    "flex-wrap": "wrap",
                    paddingTop: "5px",
                  } },
                  h("small", { style: { textIndent: "20px" } },
                    h("ion-icon", { name: "pricetags" }),
                    " \u00A0 Tags"),
                  h("fireenjin-select-tags", { style: {
                      display: "block",
                      width: "100%",
                      height: "40px",
                    }, lines: "none", name: "tags", value: ((_t = this.photo) === null || _t === void 0 ? void 0 : _t.tags) || [], options: [
                      {
                        label: "Shareable",
                        value: "shareable",
                      },
                      {
                        label: "Curbshot",
                        value: "curbshot",
                      },
                      {
                        label: "Important",
                        value: "important",
                      },
                      {
                        label: "Contents",
                        value: "contents",
                      },
                      {
                        label: "Reading",
                        value: "reading",
                      },
                    ] })),
                h("ion-col", { style: { maxWidth: "50px", display: "flex" } },
                  h("ion-buttons", null,
                    h("ion-button", { title: "Delete Photo", style: {
                        "--color-hover": "var(--ion-color-danger)",
                        "--background-hover": "transparent",
                      }, onClick: async (event) => {
                        if (!confirm("Are you sure you wish to delete this photo?"))
                          return;
                        const photo = await this.photoCarouselEl.getPhoto();
                        this.fireenjinSubmit.emit({
                          endpoint: "deletePhoto",
                          event,
                          id: photo === null || photo === void 0 ? void 0 : photo.id,
                        });
                      } },
                      h("ion-icon", { slot: "icon-only", name: "trash" })))))))))),
    ];
  }
  static get is() { return "modal-site-edit"; }
  static get originalStyleUrls() { return {
    "$": ["modal-site-edit.css"]
  }; }
  static get styleUrls() { return {
    "$": ["modal-site-edit.css"]
  }; }
  static get properties() { return {
    "jobId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "job-id",
      "reflect": false
    },
    "isUploading": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-uploading",
      "reflect": false,
      "defaultValue": "false"
    },
    "photo": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Partial<Photo>",
        "resolved": "{ __typename?: \"Photo\"; createdAt?: string; createdBy?: User; default?: boolean; id?: string; inventory?: Inventory; job?: Job; service?: Service; site?: Site; tags?: string[]; updatedAt?: string; updatedBy?: User; url?: string; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Photo": {
            "location": "import",
            "path": "../../../sdk"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{}"
    },
    "uploadUrl": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "upload-url",
      "reflect": false
    },
    "currentSlide": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "current-slide",
      "reflect": false
    },
    "viewGallery": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "view-gallery",
      "reflect": false,
      "defaultValue": "true"
    },
    "showProgress": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-progress",
      "reflect": false,
      "defaultValue": "false"
    },
    "photoUploading": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "photo-uploading",
      "reflect": false,
      "defaultValue": "false"
    },
    "siteId": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "site-id",
      "reflect": false
    },
    "selectedTab": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"info\" | \"photos\" | \"areas\" | \"dots\"",
        "resolved": "\"areas\" | \"dots\" | \"info\" | \"photos\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected-tab",
      "reflect": false
    }
  }; }
  static get states() { return {
    "photoCarouselEl": {}
  }; }
  static get events() { return [{
      "method": "floodteamCloseModal",
      "name": "floodteamCloseModal",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "floodteamCloseToast",
      "name": "floodteamCloseToast",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "fireenjinFetch",
      "name": "fireenjinFetch",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinFetchEvent",
        "resolved": "FireEnjinFetchEvent",
        "references": {
          "FireEnjinFetchEvent": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }, {
      "method": "fireenjinSubmit",
      "name": "fireenjinSubmit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinSubmitEvent",
        "resolved": "FireEnjinSubmitEvent",
        "references": {
          "FireEnjinSubmitEvent": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }, {
      "method": "fireenjinTrigger",
      "name": "fireenjinTrigger",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinTriggerInput",
        "resolved": "FireEnjinTriggerInput",
        "references": {
          "FireEnjinTriggerInput": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "fireenjinSuccess",
      "method": "onSuccess",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "fireenjinReset",
      "method": "onReset",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
