import { r as registerInstance, e as createEvent, h, B as Build, H as Host } from './index-e0adbd54.js';
import { f as formatMeasure } from './formatMeasure-9f94343e.js';
import { s as state } from './store-75674961.js';
import './index-96e8c812.js';
import './getHandlebarsHelpers-c1e27d99.js';
import './_commonjsHelpers-44457d8d.js';
import './index-e6b3332e.js';
import './localforage-394b59fa.js';

const FormSiteAreas = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinSubmit = createEvent(this, "fireenjinSubmit", 7);
    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" })))))),
    ];
  }
};

const FormSiteInfo = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.jobId = undefined;
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    return (h("fireenjin-form", { name: "info", endpoint: ((_a = state.site) === null || _a === void 0 ? void 0 : _a.id) ? "editSite" : "addSite", submitButton: ((_b = state.site) === null || _b === void 0 ? void 0 : _b.id) ? "Save" : "Next", resetButton: ((_c = state.site) === null || _c === void 0 ? void 0 : _c.id) ? "Delete Site" : null, resetButtonColor: "danger", beforeSubmit: (data) => {
        var _a;
        const job = (state === null || state === void 0 ? void 0 : state.job) || state.jobs[this.jobId];
        if (!(job === null || job === void 0 ? void 0 : job.sites))
          job.sites = [];
        if (!((_a = state === null || state === void 0 ? void 0 : state.site) === null || _a === void 0 ? void 0 : _a.id)) {
          job.sites.push(data);
        }
        else {
          job.sites = job.sites.map(site => { var _a; return (site === null || site === void 0 ? void 0 : site.id) === ((_a = state === null || state === void 0 ? void 0 : state.site) === null || _a === void 0 ? void 0 : _a.id) ? { ...site, ...data } : site; });
        }
        state.job = job;
        state.jobs = { ...state.jobs, [this.jobId]: job };
        return {
          ...data,
          jobId: this.jobId,
          chamber: ((data === null || data === void 0 ? void 0 : data.chamber) && parseInt(data.chamber)) || 0,
          class: ((data === null || data === void 0 ? void 0 : data.class) && parseInt(data.class)) || 0,
          level: ((data === null || data === void 0 ? void 0 : data.level) && parseInt(data.level)) || 0,
          offsets: ((data === null || data === void 0 ? void 0 : data.offsets) && parseInt(data.offsets)) || 0,
        };
      }, documentId: (_d = state.site) === null || _d === void 0 ? void 0 : _d.id, disableLoader: true, disableEnterButton: true }, h("ion-grid", null, h("ion-row", null, h("ion-col", null, h("floodteam-input-room", { label: "Room", labelPosition: "stacked", value: (_e = state.site) === null || _e === void 0 ? void 0 : _e.name, required: true }))), h("ion-row", null, h("ion-col", { size: "6", sizeSm: "3" }, h("fireenjin-input", { label: "Level", labelPosition: "stacked", type: "number", placeholder: "What level is the site on?", name: "level", value: (_f = state.site) === null || _f === void 0 ? void 0 : _f.level })), h("ion-col", { size: "6", sizeSm: "3" }, h("fireenjin-input", { label: "Chamber", labelPosition: "stacked", type: "number", placeholder: "What drying chamber is this in?", name: "chamber", value: (_g = state.site) === null || _g === void 0 ? void 0 : _g.chamber })), h("ion-col", { size: "6", sizeSm: "3" }, h("fireenjin-input", { label: "Offsets", labelPosition: "stacked", type: "number", placeholder: "Wall Offsets", name: "offsets", value: (_h = state.site) === null || _h === void 0 ? void 0 : _h.offsets })), h("ion-col", { size: "6", sizeSm: "3" }, h("fireenjin-input", { label: "Class", labelPosition: "stacked", type: "number", placeholder: "What class of water loss in this site?", name: "class", value: (_j = state.site) === null || _j === void 0 ? void 0 : _j.class }))), h("ion-row", null, h("ion-col", null, h("ion-item-divider", null, "Material Info"))), h("ion-row", null, h("ion-col", { size: "12", sizeSm: "6", sizeMd: "4" }, h("floodteam-input-material", { label: "Flooring", labelPosition: "stacked", name: "floorType", options: [
        {
          label: "Tile",
          value: "tile",
        },
        {
          label: "Carpet & Pad",
          value: "carpet",
        },
        {
          label: "Concrete",
          value: "concrete",
        },
        {
          label: "Wood",
          value: "wood",
        },
      ], value: (_k = state.site) === null || _k === void 0 ? void 0 : _k.floorType })), h("ion-col", { size: "12", sizeSm: "6", sizeMd: "4" }, h("floodteam-input-material", { label: "Walling", labelPosition: "stacked", name: "wallType", options: [
        {
          label: "Drywall",
          value: "drywall",
        },
        {
          label: "Insulation",
          value: "insulation",
        },
      ], value: (_l = state.site) === null || _l === void 0 ? void 0 : _l.wallType })), h("ion-col", { size: "12", sizeSm: "6", sizeMd: "4" }, h("floodteam-input-material", { label: "Ceiling Type", labelPosition: "stacked", name: "ceilingType", value: (_m = state.site) === null || _m === void 0 ? void 0 : _m.ceilingType }))))));
  }
};

const photoCarouselCss = "floodteam-photo-carousel{display:block;position:relative;margin:0 auto;min-height:200px;padding-top:56.25%;}floodteam-photo-carousel ion-slides::after{content:\"\";display:block;height:40px;width:100%;position:absolute;left:0;right:0;top:0;background:transparent;background:linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0) 10%,\n    rgba(0, 0, 0, 0.3) 80%\n  )}floodteam-photo-carousel ion-slides{position:absolute !important;top:0;left:0;right:0;bottom:0;overflow:hidden !important}floodteam-photo-carousel ion-slide{margin:auto}floodteam-photo-carousel input[type=\"file\"]{height:0px;width:0px;visibility:hidden;opacity:0 !important;display:block;overflow:hidden;float:left}floodteam-photo-carousel floodteam-fallback{--floodteam-fallback-icon-size:10vw}floodteam-photo-carousel floodteam-fallback ion-icon{max-width:120px;max-height:120px;color:var(--ion-color-base-dark)}floodteam-photo-carousel .photo-pagination{position:absolute;top:10px;left:8px;color:#666;display:block;z-index:2;padding-right:10px}@media only screen and (max-width: 500px){floodteam-photo-carousel .photo-pagination{top:5px;left:4px}floodteam-photo-carousel ion-fab-button{height:45px !important;width:45px !important}}";

const PhotoCarousel = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinTrigger = createEvent(this, "fireenjinTrigger", 7);
    this.jobId = undefined;
    this.siteId = undefined;
    this.badgeColor = "medium";
    this.addButtonColor = "primary";
    this.hideAddButton = false;
    this.photos = [];
    this.currentSlide = 0;
    this.options = {};
    this.name = "photocarousel";
    this.type = "site";
    this.multiple = true;
    this.uploadPath = undefined;
    this.tags = [];
  }
  async onSlideChange() {
    this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
  }
  async getCurrentSlide() {
    this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
    return this.currentSlide;
  }
  async getPhoto() {
    return this.photos[this.currentSlide - 1];
  }
  async slideNext() {
    return this.photoSlidesEl.slideNext();
  }
  async slidePrev() {
    return this.photoSlidesEl.slidePrev();
  }
  async slideTo(slideNumber) {
    return this.photoSlidesEl.slideTo(slideNumber - 1);
  }
  async selectFiles() {
    this.fireenjinTrigger.emit({
      name: "photos",
      multiple: !!this.multiple,
      payload: {
        path: this.uploadPath || `jobs/${this.jobId}/photos`,
        jobId: this.jobId,
        siteId: this.siteId,
        tags: this.tags || [],
      },
    });
  }
  async update() {
    this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
    return this.photoSlidesEl.update();
  }
  componentDidLoad() {
    var _a;
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    if (!((_a = this.photoSlidesEl) === null || _a === void 0 ? void 0 : _a.getActiveIndex)) {
      setTimeout(this.componentDidLoad, 200);
      return;
    }
    setTimeout(async () => {
      this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
      await this.photoSlidesEl.update();
    }, 200);
  }
  render() {
    var _a, _b;
    return (h(Host, null, ((_a = this.photos) === null || _a === void 0 ? void 0 : _a.length) ? (h("ion-badge", { color: this.badgeColor, class: "photo-pagination" }, this.currentSlide, " / ", this.photos.length)) : null, !this.hideAddButton ? (h("ion-button", { class: "select-photo ion-float-right", color: this.addButtonColor, onClick: () => this.selectFiles() }, "Add")) : null, ((_b = this.photos) === null || _b === void 0 ? void 0 : _b.length) ? (h("ion-slides", { ref: (el) => (this.photoSlidesEl = el), pager: false, options: this.options }, this.photos.map((photo) => (h("ion-slide", null, h("ion-img", { src: photo.url })))))) : (h("floodteam-fallback", { icon: "image", message: "No Picture Taken..." }))));
  }
};
PhotoCarousel.style = photoCarouselCss;

export { FormSiteAreas as floodteam_form_site_areas, FormSiteInfo as floodteam_form_site_info, PhotoCarousel as floodteam_photo_carousel };
