import { h, Build, } from "@stencil/core";
import { toastController } from "@ionic/core";
import getStatusOptions from "../../../helpers/getStatusOptions";
import state from "../../../store";
import isAdmin from "../../../helpers/auth/isAdmin";
export class ModalJobEdit {
  constructor() {
    this.steps = ["info", "cause", "payment"];
    this.payModels = [];
    this.step = "info";
  }
  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;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.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();
      }
    }
  }
  onTabClick(tabName) {
    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 presentToast() {
    const toast = await toastController.create({
      message: `Job has been edited successfully!`,
      duration: 2000,
    });
    toast.present();
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.tabsEl.select(this.step);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, "Edit Job"), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, 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: "cause", onClick: () => this.onTabClick("cause") }, h("ion-icon", { name: "water" }), h("ion-label", null, "Cause")), h("ion-tab-button", { tab: "payment", onClick: () => this.onTabClick("payment") }, h("ion-icon", { name: "cash" }), h("ion-label", null, "Payment"))), h("ion-tab", { tab: "info" }, h("ion-content", null, h("ion-card", null, h("fireenjin-form", { class: "ion-padding", endpoint: "editJob", documentId: (_a = state === null || state === void 0 ? void 0 : state.job) === null || _a === void 0 ? void 0 : _a.id, disableLoader: true, disableEnterButton: true, beforeSubmit: (data) => ({
          ...data,
          afterhours: this.afterhoursEl.checked,
        }), submitButton: "Next", resetButtonColor: "medium" }, h("fireenjin-input", { label: "Title", labelPosition: "stacked", placeholder: "Title of the Job", name: "title", value: (_b = state === null || state === void 0 ? void 0 : state.job) === null || _b === void 0 ? void 0 : _b.title }), h("fireenjin-input-address", { googleMapsKey: (_d = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.firebase) === null || _d === void 0 ? void 0 : _d.apiKey, label: "Address", labelPosition: "stacked", placeholder: "The street address of the job", name: "address", value: (_e = state === null || state === void 0 ? void 0 : state.job) === null || _e === void 0 ? void 0 : _e.address }), h("fireenjin-select", { label: "Location", name: "locationId", options: ((state === null || state === void 0 ? void 0 : state.locations) || []).map((location) => ({
          label: (location === null || location === void 0 ? void 0 : location.name) || "No Location Name",
          value: location === null || location === void 0 ? void 0 : location.id,
        })), value: (_g = (_f = state === null || state === void 0 ? void 0 : state.job) === null || _f === void 0 ? void 0 : _f.location) === null || _g === void 0 ? void 0 : _g.id }), h("fireenjin-select", { name: "status", label: "Status", value: (_h = state === null || state === void 0 ? void 0 : state.job) === null || _h === void 0 ? void 0 : _h.status, options: getStatusOptions() }), h("fireenjin-input", { name: "claimNumber", label: "Claim Number", labelPosition: "stacked", value: (_j = state === null || state === void 0 ? void 0 : state.job) === null || _j === void 0 ? void 0 : _j.claimNumber }), h("fireenjin-input", { name: "matterportModelId", label: "Matterport Model ID", labelPosition: "stacked", value: (_k = state === null || state === void 0 ? void 0 : state.job) === null || _k === void 0 ? void 0 : _k.matterportModelId }), h("fireenjin-select-tags", { name: "tags", label: "Tags", labelPosition: "stacked", value: (_l = state === null || state === void 0 ? void 0 : state.job) === null || _l === void 0 ? void 0 : _l.tags, allowAdding: true, options: [
          {
            label: "Important",
            value: "important",
          },
          {
            label: "Referral",
            value: "referral",
          },
          {
            label: "Plumber",
            value: "plumber",
          },
          {
            label: "Staff",
            value: "staff",
          },
          {
            label: "Agent",
            value: "agent",
          },
          {
            label: "Property Manager",
            value: "property manager",
          },
          {
            label: "PEU",
            value: "peu",
          },
        ] }), h("ion-item", null, h("ion-label", null, "Afterhours Service Call?"), h("ion-toggle", { name: "afterhours", ref: (el) => (this.afterhoursEl = el), checked: (_m = state === null || state === void 0 ? void 0 : state.job) === null || _m === void 0 ? void 0 : _m.afterhours })))))), h("ion-tab", { tab: "cause" }, h("ion-content", null, h("ion-card", { class: "ion-padding" }, h("fireenjin-form", { name: "cause", endpoint: "editJob", beforeSubmit: (data) => ({
          ...data,
          category: data.category ? parseInt(data.category) : 1,
        }), documentId: (_o = state === null || state === void 0 ? void 0 : state.job) === null || _o === void 0 ? void 0 : _o.id, submitButton: "Next", resetButton: "Back", resetButtonColor: "medium", disableLoader: true }, h("fireenjin-input", { label: "Category", labelPosition: "stacked", placeholder: "The category of water loss", name: "category", value: (_p = state === null || state === void 0 ? void 0 : state.job) === null || _p === void 0 ? void 0 : _p.category, type: "number", min: "1", max: "3" }), h("fireenjin-input", { label: "Cause", labelPosition: "stacked", placeholder: "The cause of the water loss", name: "cause", value: (_q = state === null || state === void 0 ? void 0 : state.job) === null || _q === void 0 ? void 0 : _q.cause }), h("fireenjin-input", { type: "date", name: "dateOfLoss", placeholder: "No Date Set", label: "Date of Loss", labelPosition: "stacked", value: ((_r = state === null || state === void 0 ? void 0 : state.job) === null || _r === void 0 ? void 0 : _r.dateOfLoss) || undefined }))))), h("ion-tab", { tab: "payment" }, h("ion-content", null, h("ion-card", { class: "ion-padding" }, h("fireenjin-form", { name: "payment", endpoint: "editJob", submitButton: "Next", resetButton: "Back", documentId: (_s = state === null || state === void 0 ? void 0 : state.job) === null || _s === void 0 ? void 0 : _s.id, resetButtonColor: "medium", disableLoader: true }, h("fireenjin-toggle", { name: "isFranchise", label: "Franchise Job", value: (_t = state === null || state === void 0 ? void 0 : state.job) === null || _t === void 0 ? void 0 : _t.isFranchise }), h("fireenjin-select", { label: "Pay Model", name: "payModelId", endpoint: "listPayModels", resultsKey: "payModels", limit: 100, value: (_v = (_u = state === null || state === void 0 ? void 0 : state.job) === null || _u === void 0 ? void 0 : _u.payModel) === null || _v === void 0 ? void 0 : _v.id }), isAdmin() && [
        h("fireenjin-input", { name: "amountBilled", label: "Amount Billed", labelPosition: "stacked", type: "tel", value: (_w = state === null || state === void 0 ? void 0 : state.job) === null || _w === void 0 ? void 0 : _w.amountBilled }),
        h("fireenjin-input", { name: "amountPaid", label: "Amount Paid", labelPosition: "stacked", type: "tel", value: (_x = state === null || state === void 0 ? void 0 : state.job) === null || _x === void 0 ? void 0 : _x.amountPaid }),
        h("fireenjin-input", { name: "amountDeducted", label: "Amount Deducted", labelPosition: "stacked", type: "tel", value: (_y = state === null || state === void 0 ? void 0 : state.job) === null || _y === void 0 ? void 0 : _y.amountDeducted }),
        h("fireenjin-input", { name: "amountOwed", label: "Amount Owed", labelPosition: "stacked", type: "tel", value: (_z = state === null || state === void 0 ? void 0 : state.job) === null || _z === void 0 ? void 0 : _z.amountOwed }),
      ])))))),
    ];
  }
  static get is() { return "modal-job-edit"; }
  static get originalStyleUrls() {
    return {
      "$": ["modal-job-edit.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["modal-job-edit.css"]
    };
  }
  static get properties() {
    return {
      "payModels": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "PayModel[]",
          "resolved": "PayModel[]",
          "references": {
            "PayModel": {
              "location": "import",
              "path": "../../../sdk"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "[]"
      },
      "step": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "\"info\" | \"cause\" | \"payment\"",
          "resolved": "\"cause\" | \"info\" | \"payment\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "step",
        "reflect": false,
        "defaultValue": "\"info\""
      }
    };
  }
  static get events() {
    return [{
        "method": "floodteamCloseModal",
        "name": "floodteamCloseModal",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "fireenjinReset",
        "method": "onReset",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "fireenjinSuccess",
        "method": "onSuccess",
        "target": "body",
        "capture": false,
        "passive": false
      }];
  }
}
