import { r as registerInstance, B as Build, h } from './index-e0adbd54.js';
import { C as ClipboardJS } from './clipboard-dc04d59f.js';
import { s as state } from './store-75674961.js';
import './_commonjsHelpers-44457d8d.js';
import './index-96e8c812.js';
import './getHandlebarsHelpers-c1e27d99.js';
import './index-e6b3332e.js';
import './localforage-394b59fa.js';

const bookNowCss = "floodteam-book-now .success-message{display:block;opacity:0;height:0px;transition:opacity 0.6s ease;transition-delay:1s}floodteam-book-now .successful .success-message{opacity:1;height:auto}floodteam-book-now fireenjin-form{transition:opacity 0.6s ease;opacity:1}floodteam-book-now .successful fireenjin-form{opacity:0;height:0px}floodteam-book-now b{display:block;text-align:center;color:var(--ion-color-secondary)}";

const BookNow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.referring = false;
    this.referralId = undefined;
    this.locationId = undefined;
    this.token = undefined;
    this.googleMapsKey = undefined;
    this.errors = [];
    this.successful = false;
    this.formData = {};
    this.confirmationId = undefined;
    this.checkmarkEl = undefined;
  }
  onError(event) {
    if (event.detail.endpoint === "addJob") {
      setTimeout(() => {
        this.errors = event.detail.error.response.errors.map((err) => err.message);
      }, 100);
    }
  }
  async onSuccess(event) {
    var _a, _b, _c;
    this.errors = [];
    if (event.detail.endpoint === "addJob") {
      await this.formEl.reset();
      this.successful = true;
      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;
      setTimeout(() => {
        this.checkmarkEl.animating = true;
      }, 500);
    }
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    // Get Data
    this.formData.token = this.token;
    this.formData.locationId = this.locationId;
    if (!this.referring) {
      new ClipboardJS(".btn");
    }
  }
  onBeforeSubmit(data) {
    return {
      ...data,
      referralId: this.referralId ? this.referralId : null,
    };
  }
  render() {
    var _a, _b;
    return (h("ion-card", { class: { successful: this.successful, "ion-padding": true } }, this.errors.map((message) => (h("floodteam-error", { message: message }))), h("fireenjin-form", { ref: (el) => (this.formEl = el), endpoint: "addJob", formData: this.formData, resetButtonColor: "medium", beforeSubmit: this.onBeforeSubmit.bind(this) }, h("ion-list", null, h("fireenjin-input", { name: "customer", label: "Customer Name", labelPosition: "stacked", placeholder: "What is the customer's full name?" }), h("fireenjin-input", { type: "tel", inputMode: "tel", labelPosition: "stacked", label: "Customer Phone Number", placeholder: "What is the customer's phone number?", name: "phone" }), h("fireenjin-input", { name: "email", type: "email", labelPosition: "stacked", label: "Customer Email", placeholder: "What is the customer's email address?" }), h("fireenjin-input-address", { googleMapsKey: this.googleMapsKey || ((_b = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.firebase) === null || _b === void 0 ? void 0 : _b.apiKey), name: "address", label: "Job Address", labelPosition: "stacked", placeholder: "What is the address of the loss?" }))), h("div", { class: "success-message" }, h("floodteam-checkmark", { size: "100px", ref: (el) => (this.checkmarkEl = el) }), h("ion-grid", null, h("ion-row", null, h("ion-col", { class: "message-content" }, h("ion-label", null, h("h1", null, "Job Added Successfully!"), !this.referring ? (h("p", null, "Job was submitted successfully, here is the confirmation number. Use the \"Copy to Clipboard\" button to copy and paste it into the field on AnswerConnect's system.")) : (h("p", null, "Your job was submitted successfully.")))), h("ion-col", { class: "dashboard-button" }, !this.referring ? (h("div", null, h("b", null, this.confirmationId), h("br", null), h("ion-button", { class: "btn", size: "default", expand: "block", "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" }, "Open Job"))))))));
  }
};
BookNow.style = bookNowCss;

export { BookNow as floodteam_book_now };
