import { Build, Host, h, } from "@stencil/core";
import serviceAddress from "../../helpers/steps/serviceAddress";
import customerName from "../../helpers/steps/customerName";
import contactInformation from "../../helpers/steps/contactInformation";
import selectLocation from "../../helpers/steps/selectLocation";
import serviceType from "../../helpers/steps/serviceType";
import valueToPath from "../../helpers/valueToPath";
import ClipboardJS from "clipboard";
import getLocationById from "../../helpers/getLocationById";
export class BookFlow {
  constructor() {
    this.paths = {
      bookFlow: () => [
        serviceAddress(),
        customerName(),
        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 (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.setPath();
    // Get Data
    if (!this.referring) {
      new ClipboardJS(".btn");
    }
  }
  render() {
    var _a, _b;
    const unit = 1 / this.steps.length;
    const progress = unit * this.currentSlideIndex;
    return (h(Host, null, this.errors.map((message) => (h("floodteam-error", { message: message }))), !(this.currentSlideIndex >= this.steps.length) && (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 })), 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",
      } }, h("div", { style: { color: "var(--ion-text-color)", padding: "2rem 3rem" } }, h("h1", { class: "ion-padding-horizontal" }, "Success! The Flood Team is on the job \uD83D\uDCAA."), 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."), h("div", { class: "confirm-card" }, h("span", null, h("small", null, "Customer"), h("p", null, this.customer || "")), h("span", null, h("small", null, "Phone"), h("p", null, this.phone || "")), h("span", null, h("small", null, "Address"), h("p", null, ((_a = this.address) === null || _a === void 0 ? void 0 : _a.full) || "")), h("span", null, h("small", null, "Flood Team Location"), h("p", null, (_b = getLocationById(this.locationId)) === null || _b === void 0 ? void 0 : _b.name)), h("span", null, h("small", null, "Job ID"), h("p", null, this.confirmationId))), h("div", { style: {
        display: "flex",
        justifyContent: "space-between",
        gap: "2rem",
      } }, h("ion-button", { class: "btn", size: "default", expand: "block", fill: "outline", "data-clipboard-text": this.confirmationId }, "Copy to clipboard", h("ion-icon", { name: "clipboard", slot: "end" })), h("ion-button", { size: "default", href: `/jobs/${this.confirmationId}`, expand: "block" }, "View Job"))))));
  }
  static get is() { return "floodteam-book-flow"; }
  static get properties() {
    return {
      "currentPath": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The current path of the flow they are in"
        },
        "attribute": "current-path",
        "reflect": false,
        "defaultValue": "\"bookFlow\""
      },
      "currentStep": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The current step of the path they are on"
        },
        "attribute": "current-step",
        "reflect": false,
        "defaultValue": "\"serviceAddress\""
      },
      "campaignId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The ID of the AD Campaign"
        },
        "attribute": "campaign-id",
        "reflect": false
      },
      "referring": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Is the user referring?"
        },
        "attribute": "referring",
        "reflect": false,
        "defaultValue": "false"
      },
      "referralId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The ID of the referring user"
        },
        "attribute": "referral-id",
        "reflect": false
      },
      "agentId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The ID of the agent"
        },
        "attribute": "agent-id",
        "reflect": false
      },
      "locationId": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The ID of the location"
        },
        "attribute": "location-id",
        "reflect": false
      },
      "token": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The campaign or API token"
        },
        "attribute": "token",
        "reflect": false
      },
      "googleMapsKey": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The Google Maps API Key"
        },
        "attribute": "google-maps-key",
        "reflect": false
      },
      "phone": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The phone number captured in the flow"
        },
        "attribute": "phone",
        "reflect": false
      },
      "customer": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The name of the customer captured in the flow"
        },
        "attribute": "customer",
        "reflect": false
      },
      "address": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "Address",
          "resolved": "{ __typename?: \"Address\"; city?: string; country?: string; createdAt?: string; createdBy?: User; full?: string; id?: string; lat?: number; lng?: number; placeId?: string; state?: string; street?: string; unit?: string; updatedAt?: string; updatedBy?: User; zip?: string; }",
          "references": {
            "Address": {
              "location": "import",
              "path": "../../sdk"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The service address captured in the flow"
        }
      }
    };
  }
  static get states() {
    return {
      "confirmationId": {},
      "errors": {},
      "steps": {},
      "currentSlideIndex": {}
    };
  }
  static get methods() {
    return {
      "setPath": {
        "complexType": {
          "signature": "(path?: string) => Promise<Step[]>",
          "parameters": [{
              "tags": [{
                  "name": "param",
                  "text": "path The path name to change to"
                }],
              "text": "The path name to change to"
            }],
          "references": {
            "Promise": {
              "location": "global"
            },
            "Step": {
              "location": "import",
              "path": "@fireenjin/components/dist/types/typings"
            }
          },
          "return": "Promise<Step[]>"
        },
        "docs": {
          "text": "Set the path of the flow",
          "tags": [{
              "name": "param",
              "text": "path The path name to change to"
            }, {
              "name": "returns",
              "text": "A list of steps for the current path"
            }]
        }
      }
    };
  }
  static get listeners() {
    return [{
        "name": "fireenjinError",
        "method": "onError",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "ionInput",
        "method": "onChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "ionChange",
        "method": "onChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "fireenjinSuccess",
        "method": "onSuccess",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "ionSlideDidChange",
        "method": "onSlideChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
