'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-e0385008.js');
const store = require('./store-8d1de66f.js');
const getLocationById = require('./getLocationById-aedccb81.js');
const getLocationOptions = require('./getLocationOptions-9666ff6e.js');
const clipboard = require('./clipboard-87e6130b.js');
require('./index-37fc02d8.js');
require('./getHandlebarsHelpers-1b368c8a.js');
require('./_commonjsHelpers-a5111d61.js');
require('./index-ba857994.js');
require('./localforage-af1b8c0e.js');

const serviceAddress = ({ name = "serviceAddress", beforeHTML = "<h1>What is the service address?</h1>", label = "Address", value = null, } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      googleMapsKey: store.env("firebase.apiKey"),
      label,
      labelPosition: "stacked",
      name: "address",
      type: "address",
      required: true,
      clearInput: true,
      value,
    },
  ],
});

const customerName = ({ beforeHTML = "<h1>Who is the main contact at the service address?</h1>", label = "Full Name", value = null, name = "customerName", } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      label,
      labelPosition: "stacked",
      placeholder: "First and last name",
      name: "customer",
      type: "text",
      clearInput: true,
      required: true,
      value,
    },
  ],
});

const selectLocation = (_a) => {
  var _b;
  var { name = "selectLocation", locationId = null, beforeHTML = `<h1>It looks like the closest Flood Team location is in ${((_b = getLocationById.getLocationById(locationId)) === null || _b === void 0 ? void 0 : _b.name) || "St. Louis"}.</h1> <h2>Would you like to select a different location?</h2>`, } = _a === void 0 ? {} : _a;
  return ({
    name,
    beforeHTML,
    fields: [
      {
        name: "locationId",
        type: "select",
        value: locationId,
        required: true,
        placeholder: "Select a location",
        interfaceOptions: {
          header: "Flood Team Locations",
          message: "select one",
        },
        options: getLocationOptions.getLocationOptions(),
      },
    ],
  });
};

const serviceType = ({ name = "serviceType", beforeHTML = "<h1>What type of service are you contacting us about?</h1>", } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      name: "serviceTypes",
      required: true,
      type: "checklist",
      options: [
        {
          label: "Water Clean-up & dry",
          value: "water",
        },
        {
          label: "Mold Remediation",
          value: "mold",
        },
        {
          label: "Box Out / Contents",
          value: "content",
        },
        {
          label: "Reconstruction",
          value: "reconstruction",
        },
        {
          label: "Drain Cleaning",
          value: "drain",
        },
      ],
    },
  ],
});

/**
 * Turns a dot noation path and a value into a nested object, with option
 * to pass in an existing object.
 *
 * @param path The dot notation path you are setting value for
 * @param value The value you want set
 * @param obj An optional object that you want to start with
 * @returns An object with the new injected value
 */
function valueToPath(path, value, obj) {
  const newObj = obj ? obj : {};
  console.log(path, value, obj);
  path
    .split(".")
    .reduce((accumulator, val, i, pathParts) => accumulator[val]
    ? accumulator[val]
    : (accumulator[val] =
      pathParts.length === i + 1 ? (value ? value : null) : {}), newObj);
  return newObj;
}

const BookFlow = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.paths = {
      bookFlow: () => [
        serviceAddress(),
        customerName(),
        getLocationById.contactInformation(),
        selectLocation({
          locationId: this.locationId,
        }),
        serviceType(),
      ],
    };
    this.currentPath = "bookFlow";
    this.currentStep = "serviceAddress";
    this.campaignId = undefined;
    this.referring = false;
    this.referralId = undefined;
    this.agentId = undefined;
    this.locationId = undefined;
    this.token = undefined;
    this.googleMapsKey = undefined;
    this.phone = undefined;
    this.customer = undefined;
    this.address = undefined;
    this.confirmationId = undefined;
    this.errors = [];
    this.steps = [];
    this.currentSlideIndex = 0;
  }
  /**
   * Set the path of the flow
   * @param path The path name to change to
   * @returns A list of steps for the current path
   */
  async setPath(path) {
    var _a, _b, _c, _d;
    this.currentPath = path || this.currentPath;
    this.currentStep =
      ((_d = (_c = (_b = (_a = this.paths) === null || _a === void 0 ? void 0 : _a[this.currentPath]) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[this.currentSlideIndex]) === null || _d === void 0 ? void 0 : _d.name) ||
        null;
    this.steps = this.paths[this.currentPath]();
    return this.steps;
  }
  onError(event) {
    if (event.detail.endpoint === "addJob") {
      setTimeout(() => {
        this.errors = event.detail.error.response.errors.map((err) => err.message);
      }, 100);
    }
  }
  onChange(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    console.log(event);
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "customer") {
      this.customer = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || null;
    }
    else if (event.target.name === "phone") {
      this.phone = ((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.value) || null;
    }
    else if ((_f = (_e = (_d = event === null || event === void 0 ? void 0 : event.target) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, "address.")) {
      this.address = valueToPath(event.target.name.replace("address.", ""), (_g = event === null || event === void 0 ? void 0 : event.target) === null || _g === void 0 ? void 0 : _g.value, this.address);
      console.log(event.target.name, this.address);
    }
    else if (((_h = event === null || event === void 0 ? void 0 : event.target) === null || _h === void 0 ? void 0 : _h.name) === "address") {
      this.address = (_j = event === null || event === void 0 ? void 0 : event.target) === null || _j === void 0 ? void 0 : _j.value;
    }
    else if (event.target.name === "locationId") {
      this.locationId = ((_k = event === null || event === void 0 ? void 0 : event.target) === null || _k === void 0 ? void 0 : _k.value) || null;
    }
  }
  async onSuccess(event) {
    var _a, _b, _c;
    this.errors = [];
    if (event.detail.endpoint === "addJob") {
      this.confirmationId = (_c = (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.addJob) === null || _c === void 0 ? void 0 : _c.id;
    }
  }
  async onSlideChange(event) {
    this.currentSlideIndex = await event.target.getActiveIndex();
    await this.setPath();
  }
  onBeforeSubmit(data) {
    return {
      ...data,
      campaignId: this.campaignId || null,
      referralId: this.referralId ? this.referralId : null,
      agentId: this.agentId ? this.agentId : null,
    };
  }
  componentDidLoad() {
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    this.setPath();
    // Get Data
    if (!this.referring) {
      new clipboard.ClipboardJS(".btn");
    }
  }
  render() {
    var _a, _b;
    const unit = 1 / this.steps.length;
    const progress = unit * this.currentSlideIndex;
    return (index.h(index.Host, null, this.errors.map((message) => (index.h("floodteam-error", { message: message }))), !(this.currentSlideIndex >= this.steps.length) && (index.h("ion-progress-bar", { style: {
        width: "80%",
        margin: this.confirmationId ? "0 auto" : "30px auto",
        transition: "opacity ease 500ms",
        opacity: this.confirmationId ? "0" : "1",
      }, value: progress })), index.h("fireenjin-flow", { endpoint: "addJob", steps: this.steps, beforeSubmit: this.onBeforeSubmit.bind(this), prevButton: {
        color: "medium",
        fill: "outline",
        label: "Back",
      }, nextButton: {
        color: "primary",
        fill: "solid",
        icon: null,
        label: "Next",
      } }, index.h("div", { style: { color: "var(--ion-text-color)", padding: "2rem 3rem" } }, index.h("h1", { class: "ion-padding-horizontal" }, "Success! The Flood Team is on the job \uD83D\uDCAA."), index.h("p", { class: "ion-padding-horizontal", style: { color: "var(--ion-color-medium-shade)" } }, "A flood team associate will be reaching out to the contact above shortly to follow up on damage details and schedule an on site evaluation."), index.h("div", { class: "confirm-card" }, index.h("span", null, index.h("small", null, "Customer"), index.h("p", null, this.customer || "")), index.h("span", null, index.h("small", null, "Phone"), index.h("p", null, this.phone || "")), index.h("span", null, index.h("small", null, "Address"), index.h("p", null, ((_a = this.address) === null || _a === void 0 ? void 0 : _a.full) || "")), index.h("span", null, index.h("small", null, "Flood Team Location"), index.h("p", null, (_b = getLocationById.getLocationById(this.locationId)) === null || _b === void 0 ? void 0 : _b.name)), index.h("span", null, index.h("small", null, "Job ID"), index.h("p", null, this.confirmationId))), index.h("div", { style: {
        display: "flex",
        justifyContent: "space-between",
        gap: "2rem",
      } }, index.h("ion-button", { class: "btn", size: "default", expand: "block", fill: "outline", "data-clipboard-text": this.confirmationId }, "Copy to clipboard", index.h("ion-icon", { name: "clipboard", slot: "end" })), index.h("ion-button", { size: "default", href: `/jobs/${this.confirmationId}`, expand: "block" }, "View Job"))))));
  }
};

exports.floodteam_book_flow = BookFlow;
