import { h, } from "@stencil/core";
import state from "../../store";
export class FormSiteAreas {
  constructor() {
    this.jobId = undefined;
    this.siteId = undefined;
    this.isAffected = false;
  }
  onChange(event) {
    var _a;
    if (event.target.name === "affected") {
      this.isAffected = !!((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.checked);
    }
  }
  removeArea(index, affected) {
    var _a, _b, _c, _d, _e, _f;
    if (!confirm("Are you sure you want to remove this area?"))
      return;
    if (affected) {
      const affectedAreas = ((_a = state === null || state === void 0 ? void 0 : state.site) === null || _a === void 0 ? void 0 : _a.affectedAreas) || [];
      state.site.affectedAreas = (_b = affectedAreas.filter) === null || _b === void 0 ? void 0 : _b.call(affectedAreas, (_area, i) => i !== index);
    }
    else {
      const areas = ((_c = state.site) === null || _c === void 0 ? void 0 : _c.areas) || [];
      state.site.areas = (_d = areas.filter) === null || _d === void 0 ? void 0 : _d.call(areas, (_area, i) => i !== index);
    }
    state.site = { ...state === null || state === void 0 ? void 0 : state.site };
    this.fireenjinSubmit.emit({
      endpoint: "editSite",
      id: this.siteId,
      data: {
        jobId: this.jobId,
        areas: ((_e = state.site) === null || _e === void 0 ? void 0 : _e.areas) || [],
        affectedAreas: ((_f = state.site) === null || _f === void 0 ? void 0 : _f.affectedAreas) || [],
      },
    });
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g;
    return [
      h("fireenjin-form", { name: "measure", hideControls: true, disableLoader: true, endpoint: this.siteId ? "editSite" : "addSite", documentId: this.siteId, beforeSubmit: async (data) => {
          var _a, _b;
          const affectedAreas = ((_a = state.site) === null || _a === void 0 ? void 0 : _a.affectedAreas) || [];
          const areas = ((_b = state.site) === null || _b === void 0 ? void 0 : _b.areas) || [];
          if (this.isAffected) {
            affectedAreas.push({
              height: ((data === null || data === void 0 ? void 0 : data.height) && parseFloat(data.height)) || 0,
              length: ((data === null || data === void 0 ? void 0 : data.length) && parseFloat(data.length)) || 0,
              width: ((data === null || data === void 0 ? void 0 : data.width) && parseFloat(data.width)) || 0,
            });
          }
          else {
            areas.push({
              height: ((data === null || data === void 0 ? void 0 : data.height) && parseFloat(data.height)) || 0,
              length: ((data === null || data === void 0 ? void 0 : data.length) && parseFloat(data.length)) || 0,
              width: ((data === null || data === void 0 ? void 0 : data.width) && parseFloat(data.width)) || 0,
            });
          }
          return { jobId: this.jobId, areas, affectedAreas };
        } }, h("ion-grid", null, h("ion-row", { class: "ion-align-items-center" }, h("ion-col", { size: "2" }, h("ion-label", { style: {
          fontSize: "14px !important",
          fontWeight: "bold",
          display: "block",
          background: "transparent",
          textAlign: "left",
          padding: "0",
          fontFamily: "var(--ion-font-family)",
          marginBottom: "14px",
        }, position: "stacked" }, "Affected"), h("ion-toggle", { style: { padding: "5px 5px 5px 5px" }, name: "affected" })), h("ion-col", { size: "3" }, h("fireenjin-input", { type: "number", label: "Length", labelPosition: "stacked", name: "length", required: true })), h("ion-col", { size: "3" }, h("fireenjin-input", { type: "number", label: "Width", labelPosition: "stacked", name: "width", required: true })), h("ion-col", { size: "3" }, h("fireenjin-input", { type: "number", label: "Height", labelPosition: "stacked", name: "height" })), h("ion-col", { size: "1" }, h("ion-button", { type: "submit", size: "small", color: "primary" }, h("ion-icon", { slot: "icon-only", name: "add-circle" })))))),
      h("ion-list", null, h("ion-item-divider", null, h("ion-label", null, "Affected Areas"), h("div", { slot: "end" }, h("ion-text", null, ((_a = state.site) === null || _a === void 0 ? void 0 : _a.affectedAreaTotalSqft)
        ? state.site.affectedAreaTotalSqft
        : 0, " ", "sqft", " "), h("ion-text", null, ((_b = state.site) === null || _b === void 0 ? void 0 : _b.affectedAreaTotalCuft)
        ? state.site.affectedAreaTotalCuft
        : 0, " ", "cuft", " "))), (((_c = state.site) === null || _c === void 0 ? void 0 : _c.affectedAreas) ? (_d = state.site) === null || _d === void 0 ? void 0 : _d.affectedAreas : []).map((area, index) => (h("ion-item", null, h("ion-label", null, (area === null || area === void 0 ? void 0 : area.length) ? area.length : 0, " ft", " x ", (area === null || area === void 0 ? void 0 : area.width) ? area.width : 0, " ft", " x ", (area === null || area === void 0 ? void 0 : area.height) ? area.height : 0, " ft"), h("ion-button", { onClick: () => this.removeArea(index, true), fill: "clear", slot: "end", style: {
          "--color": "var(--ion-text-color)",
          "--color-hover": "var(--ion-color-danger",
        } }, h("ion-icon", { slot: "icon-only", name: "close-circle" }))))), h("ion-item-divider", null, h("ion-label", null, "Site Areas"), h("div", { slot: "end" }, h("ion-text", null, ((_e = state.site) === null || _e === void 0 ? void 0 : _e.areaTotalSqft) ? state.site.areaTotalSqft : 0, " sqft", " "), h("ion-text", null, ((_f = state.site) === null || _f === void 0 ? void 0 : _f.areaTotalCuft) ? state.site.areaTotalCuft : 0, " cuft", " "))), (((_g = state.site) === null || _g === void 0 ? void 0 : _g.areas) ? state.site.areas : []).map((area, index) => (h("ion-item", null, h("ion-label", null, (area === null || area === void 0 ? void 0 : area.length) ? area.length : 0, " ft", " x ", (area === null || area === void 0 ? void 0 : area.width) ? area.width : 0, " ft", " x ", (area === null || area === void 0 ? void 0 : area.height) ? area.height : 0, " ft"), h("ion-button", { onClick: () => this.removeArea(index), fill: "clear", slot: "end", style: {
          "--color": "var(--ion-text-color)",
          "--color-hover": "var(--ion-color-danger",
        } }, h("ion-icon", { slot: "icon-only", name: "close-circle" })))))),
    ];
  }
  static get is() { return "floodteam-form-site-areas"; }
  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
      },
      "siteId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "site-id",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "isAffected": {}
    };
  }
  static get events() {
    return [{
        "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"
            }
          }
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "ionChange",
        "method": "onChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
