import { h } from "@stencil/core";
import formatMeasure from "../../helpers/formatMeasure";
import state from "../../store";
export class FormSiteAreas {
  constructor() {
    this.jobId = undefined;
    this.siteId = undefined;
    this.isAffected = false;
  }
  effectedSelect(event) {
    var _a, _b, _c;
    if (event.target.name === "affected" && ((_a = state.site) === null || _a === void 0 ? void 0 : _a.areaTotalSqft)) {
      this.isAffected = !!((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.checked);
    }
    else if (event.target.name === "affected" && !((_c = state.site) === null || _c === void 0 ? void 0 : _c.areaTotalSqft)) {
      event.preventDefault();
      event.stopImmediatePropagation();
      alert("A total area measure is needed");
      event.target.checked = false;
      this.isAffected = false;
    }
  }
  removeArea(event, index, affected) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) === "area" && ((_c = (_b = state.site) === null || _b === void 0 ? void 0 : _b.areas) === null || _c === void 0 ? void 0 : _c.length) <= 1) {
      this.isAffected = false;
    }
    if (!confirm("Are you sure you want to remove this area?"))
      return;
    if (affected) {
      const affectedAreas = ((_d = state === null || state === void 0 ? void 0 : state.site) === null || _d === void 0 ? void 0 : _d.affectedAreas) || [];
      state.site.affectedAreas = (_e = affectedAreas.filter) === null || _e === void 0 ? void 0 : _e.call(affectedAreas, (_area, i) => i !== index);
    }
    else {
      const areas = ((_f = state.site) === null || _f === void 0 ? void 0 : _f.areas) || [];
      state.site.areas = (_g = areas.filter) === null || _g === void 0 ? void 0 : _g.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: ((_h = state.site) === null || _h === void 0 ? void 0 : _h.areas) || [],
        affectedAreas: ((_j = state.site) === null || _j === void 0 ? void 0 : _j.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-sm": "3", size: "12" }, h("floodteam-input-measure", { label: "Length", name: "length", required: true })), h("ion-col", { "size-sm": "3", size: "12" }, h("floodteam-input-measure", { label: "Width", name: "width", required: true })), h("ion-col", { "size-sm": "3", size: "12" }, h("floodteam-input-measure", { label: "Height", name: "height" })), h("ion-col", { "size-sm": "3", size: "12", style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        } }, h("div", { style: {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          fontSize: "0.8rem !important",
          fontWeight: "bold",
          flexDirection: "column",
          gap: "0.33rem",
          textAlign: "center",
          padding: "0",
        } }, h("ion-text", null, "Affected"), h("ion-checkbox", { style: { height: "30px", width: "30px" }, checked: this.isAffected, onClick: (event) => this.effectedSelect(event), name: "affected" })), h("ion-button", { type: "submit", size: "small", color: "primary" }, h("ion-label", null, "Save"), h("ion-icon", { slot: "end", name: "checkmark-circle" })))))),
      h("ion-list", null, h("ion-item-divider", null, h("ion-label", null, "Affected Areas"), h("div", { slot: "end" }, h("ion-badge", { style: { marginRight: "5px" } }, "sqft - ", formatMeasure(((_a = state.site) === null || _a === void 0 ? void 0 : _a.affectedAreaTotalSqft) || 0)), h("ion-badge", { style: { marginRight: "5px" } }, "cuft - ", formatMeasure(((_b = state.site) === null || _b === void 0 ? void 0 : _b.affectedAreaTotalCuft) || 0)))), (((_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", { style: {
          display: "flex",
          justifyContent: "space-evenly",
          alignItems: "center",
        } }, h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.length) || 0), " L"), h("ion-icon", { style: { width: "25px" }, name: "close" }), h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.width) || 0), " W"), h("ion-icon", { style: { width: "25px" }, name: "close" }), h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.height) || 0), " H")), h("ion-button", { id: "affectedArea", onClick: (event) => this.removeArea(event, 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-badge", { style: { marginRight: "5px" } }, "sqft - ", formatMeasure(((_e = state.site) === null || _e === void 0 ? void 0 : _e.areaTotalSqft) || 0)), h("ion-badge", { style: { marginRight: "5px" } }, "cuft - ", formatMeasure(((_f = state.site) === null || _f === void 0 ? void 0 : _f.areaTotalCuft) || 0)))), (((_g = state.site) === null || _g === void 0 ? void 0 : _g.areas) || []).map((area, index) => (h("ion-item", null, h("ion-label", { style: {
          display: "flex",
          justifyContent: "space-evenly",
          alignItems: "center",
        } }, h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.length) || 0), " L"), h("ion-icon", { style: { width: "25px" }, name: "close" }), h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.width) || 0), " W"), h("ion-icon", { style: { width: "25px" }, name: "close" }), h("div", null, formatMeasure((area === null || area === void 0 ? void 0 : area.height) || 0), " H")), h("ion-button", { onClick: (event) => this.removeArea(event, index), id: "area", 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"
            }
          }
        }
      }];
  }
}
