import { r as registerInstance, B as Build, h, H as Host } from './index-e0adbd54.js';
import { c as contactInformation, g as getLocationById } from './contactInformation-aa789fd6.js';
import './store-75674961.js';
import './index-96e8c812.js';
import './getHandlebarsHelpers-c1e27d99.js';
import './_commonjsHelpers-44457d8d.js';
import './index-e6b3332e.js';
import './localforage-394b59fa.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) {
    registerInstance(this, hostRef);
    this.paths = {
      default: () => [
        companyName({
          value: this.companyName,
        }),
        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 (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    await this.setPath();
  }
  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.companyId ? "0 auto" : "30px auto",
        transition: "opacity ease 500ms",
        opacity: this.companyId ? "0" : "1",
      }, value: progress })), 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",
      } }, h("div", { style: { color: "var(--ion-text-color)", padding: "2rem 3rem" } }, h("h1", { class: "ion-padding-horizontal" }, "Success! ", this.companyName, " has been added \uD83D\uDCAA."), 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."), h("div", { class: "confirm-card" }, h("span", null, h("small", null, "Company Name"), h("p", null, this.companyName || "")), 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, "Company ID"), h("p", null, this.companyId))), 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.companyId }, "Copy to clipboard", h("ion-icon", { name: "clipboard", slot: "end" })), h("ion-button", { size: "default", href: `/companies/${this.companyId}`, expand: "block" }, "View Company"))))));
  }
};

export { CompanyFlow as floodteam_company_flow };
