import { r as registerInstance, e as createEvent, h } from './index-e0adbd54.js';
import { s as state } from './store-4342e5d4.js';
import './index-96e8c812.js';
import './getHandlebarsHelpers-c1e27d99.js';
import './_commonjsHelpers-44457d8d.js';
import './index-e6b3332e.js';
import './localforage-394b59fa.js';

const modalFlowRiderCss = "";

const ModalFlowRider = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.floodteamCloseModal = createEvent(this, "floodteamCloseModal", 7);
    this.formData = undefined;
    this.successIcon = "checkmark-circle";
    this.headerTitle = "flow";
    this.flowId = undefined;
    this.renderId = undefined;
    this.fetch = undefined;
    this.stepInput = {};
    this.endpoint = undefined;
    this.isLoading = true;
    this.locationId = undefined;
    this.materialId = undefined;
    this.successMessage = undefined;
    this.beforeSubmit = undefined;
    this.successTemplate = undefined;
    this.errorTemplate = undefined;
    this.showProgress = true;
    this.currentPath = undefined;
    this.currentStep = undefined;
    this.showCard = false;
  }
  toggleCard() {
    this.showCard = !this.showCard;
  }
  render() {
    var _a;
    const materialId = ((_a = this.formData) === null || _a === void 0 ? void 0 : _a.materialId) || null;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.headerTitle), h("ion-buttons", { slot: "end" }, h("ion-button", { title: "toggle the background", onClick: () => this.toggleCard() }, h("ion-icon", { slot: "icon-only", name: "browsers" })), h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null, this.showCard ? (h("ion-card", null, h("floodteam-flow-rider", { formData: this.formData, renderId: this.renderId, fetch: this.fetch, stepInput: {
          dotConfirm: {
            materialId,
            material: state.materials ||
              [].find((material) => material.id === materialId),
          },
        }, endpoint: this.endpoint, isLoading: this.isLoading, successMessage: this.successMessage, beforeSubmit: this.beforeSubmit, successTemplate: this.successTemplate, errorTemplate: this.errorTemplate, showProgress: this.showProgress, currentPath: this.currentPath, currentStep: this.currentStep, flowId: this.flowId, templates: state === null || state === void 0 ? void 0 : state.templates, successIcon: this.successIcon, materialId: this.materialId }))) : (h("floodteam-flow-rider", { formData: this.formData, renderId: this.renderId, fetch: this.fetch, stepInput: {
          dotConfirm: {
            materialId,
            material: state.materials ||
              [].find((material) => material.id === materialId),
          },
        }, endpoint: this.endpoint, isLoading: this.isLoading, successMessage: this.successMessage, beforeSubmit: this.beforeSubmit, successTemplate: this.successTemplate, errorTemplate: this.errorTemplate, showProgress: this.showProgress, currentPath: this.currentPath, currentStep: this.currentStep, flowId: this.flowId, templates: state === null || state === void 0 ? void 0 : state.templates, successIcon: this.successIcon, materialId: this.materialId }))),
    ];
  }
};
ModalFlowRider.style = modalFlowRiderCss;

export { ModalFlowRider as modal_flow_rider };
