'use strict';

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

const index = require('./index-3e5ae956.js');
const getLocationById = require('./getLocationById-cb12de1f.js');
require('./store-c1e254ab.js');
require('./index-b020f7d8.js');
require('./getHandlebarsHelpers-93797155.js');
require('./_commonjsHelpers-a5111d61.js');
require('./index-ba857994.js');
require('./localforage-af1b8c0e.js');

const companyName = ({ beforeHTML = "<h1>What is the name of the company?</h1>", label = "Company Name", value = null, name = "companyName", } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      label,
      labelPosition: "stacked",
      placeholder: "The Flood Team",
      name: "name",
      type: "text",
      clearInput: true,
      required: true,
      value,
    },
  ],
});

const CompanyFlow = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.paths = {
      default: () => [
        companyName({
          value: this.companyName,
        }),
        getLocationById.contactInformation({
          value: this.phone,
        }),
      ],
    };
    this.currentPath = "default";
    this.currentStep = "companyName";
    this.locationId = undefined;
    this.phone = undefined;
    this.address = undefined;
    this.companyId = undefined;
    this.companyName = undefined;
    this.endpoint = "addCompany";
    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 === this.endpoint) {
      setTimeout(() => {
        this.errors = event.detail.error.response.errors.map((err) => err.message);
      }, 100);
    }
  }
  onChange(event) {
    var _a, _b;
    console.log(event);
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "name") {
      this.companyName = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || null;
    }
  }
  async onSuccess(event) {
    var _a, _b, _c;
    this.errors = [];
    if (event.detail.endpoint === this.endpoint) {
      this.companyId = (_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.addCompany) === null || _c === void 0 ? void 0 : _c.id;
    }
  }
  async onSlideChange(event) {
    this.currentSlideIndex = await event.target.getActiveIndex();
    await this.setPath();
  }
  onBeforeSubmit(data) {
    return {
      ...data,
    };
  }
  async componentDidLoad() {
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    await this.setPath();
  }
  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.companyId ? "0 auto" : "30px auto",
        transition: "opacity ease 500ms",
        opacity: this.companyId ? "0" : "1",
      }, value: progress })), index.h("fireenjin-flow", { endpoint: this.endpoint, 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! ", this.companyName, " has been added \uD83D\uDCAA."), index.h("p", { class: "ion-padding-horizontal", style: { color: "var(--ion-color-medium-shade)" } }, "The company has been added to the database and will be synced with Notion."), index.h("div", { class: "confirm-card" }, index.h("span", null, index.h("small", null, "Company Name"), index.h("p", null, this.companyName || "")), 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, "Company ID"), index.h("p", null, this.companyId))), 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.companyId }, "Copy to clipboard", index.h("ion-icon", { name: "clipboard", slot: "end" })), index.h("ion-button", { size: "default", href: `/companies/${this.companyId}`, expand: "block" }, "View Company"))))));
  }
};

exports.floodteam_company_flow = CompanyFlow;
