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

const modalAddStepCss = "floodteam-modal-add-step #step-type span{display:flex;justify-content:center;align-items:center;padding:1rem;flex-direction:column;margin:1rem auto;border:2px solid var(--step-type-color, var(--ion-color-medium));border-radius:10px}floodteam-modal-add-step #step-type span:hover{cursor:pointer;--step-type-color:var(--ion-color-primary)}floodteam-modal-add-step #step-type span.active{--step-type-color:var(--ion-color-primary)}floodteam-modal-add-step #step-type ion-icon{display:block;margin:0 auto;height:60px;width:60px;color:var(--step-type-color, var(--ion-text-medium));opacity:0.6}floodteam-modal-add-step #step-type span.active ion-icon{opacity:1}floodteam-modal-add-step #step-type label{display:block;margin:0 auto;text-align:center;font-size:1.1rem;color:var(--step-type-color, var(--ion-text-medium))}";

const ModalAddStep = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinSubmit = createEvent(this, "fireenjinSubmit", 7);
    this.floodteamCloseModal = createEvent(this, "floodteamCloseModal", 7);
    this.floodteamOpenModal = createEvent(this, "floodteamOpenModal", 7);
    this.stepInput = {};
    this.toggleSteps = false;
    this.showFields = true;
    this.preview = false;
    this.type = undefined;
    this.steps = [];
    this.templates = undefined;
    this.stepId = undefined;
    this.step = undefined;
    this.field = undefined;
    this.isAdvancedOpen = false;
    this.tab = undefined;
    this.db = undefined;
  }
  onSubmit(event) {
    var _a, _b, _c;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "addFieldForm") {
      this.field = ((_c = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.field) || null;
      if (this.field) {
        this.addFieldToStep(this.field);
      }
      setTimeout(() => {
        this.stepFormEl.submit();
      }, 100);
      this.fieldEl.value = "";
    }
  }
  saveStep() {
    this.stepFormEl.submit();
    this.floodteamCloseModal.emit();
  }
  onCodeChange(event) {
    this.step[event.target.name] = event.target.value;
    this.step = { ...this.step };
  }
  toggleFieldsVisibility() {
    this.showFields = !this.showFields;
  }
  stepSelect(step) {
    this.preview = false;
    this.stepId = step.id;
    this.step = step;
    this.tabsEl.select("addStep");
    this.toggleFieldsVisibility();
    setTimeout(() => {
      this.showFields = true;
    }, 100);
  }
  previewStep(step) {
    this.stepPreview = [step];
    this.preview = true;
    setTimeout(() => {
      this.tabsEl.select("stepPreview");
    }, 100);
  }
  fieldSelect(field) {
    this.field = field;
    this.toggleFieldsVisibility();
  }
  addFieldToStep(field) {
    if (!this.step.fields)
      this.step.fields = [];
    this.step.fields.splice(0, 1, typeof field === "string" ? JSON.parse(field) : field);
    this.step = { ...this.step };
    this.showFields = false;
  }
  deleteField(event, index) {
    event.preventDefault();
    event.stopPropagation();
    if (!confirm("Are you sure you want to delete this field?"))
      return;
    (this.step.fields || []).splice(index, 1);
    this.stepFormEl.submit();
    this.step = { ...this.step };
  }
  deleteStep(event, step) {
    event.preventDefault();
    event.stopPropagation();
    if (!confirm(`Are you sure you want to delete ${step === null || step === void 0 ? void 0 : step.name}?`))
      return;
    this.fireenjinSubmit.emit({
      endpoint: "deleteStep",
      data: {
        id: step === null || step === void 0 ? void 0 : step.id,
      },
    });
  }
  componentDidLoad() {
    this.tab = this.step || this.stepId ? "addStep" : "steps";
    this.tabsEl.select(this.tab);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, "Modal Step"), h("ion-buttons", { slot: "end" }, h("ion-button", { color: "primary", onClick: () => this.saveStep() }, h("ion-icon", { slot: "icon-only", name: "save" })), h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null, h("ion-tabs", { ref: (el) => (this.tabsEl = el) }, h("ion-tab-bar", { slot: "top" }, h("ion-tab-button", { tab: "addStep" }, h("ion-icon", { name: "create-outline" }), h("ion-label", null, "Add/Edit Step")), h("ion-tab-button", { tab: "steps" }, h("ion-icon", { name: "documents-outline" }), h("ion-label", null, "Steps")), h("ion-tab-button", { onClick: () => this.previewStep(this.step), tab: "stepPreview" }, h("ion-icon", { name: "eye" }), h("ion-label", null, "Preview"))), h("ion-tab", { tab: "addStep" }, h("ion-content", null, h("fireenjin-form", { hideControls: true, "data-target": "ion-app", formData: this.step, ref: (el) => (this.stepFormEl = el), endpoint: !this.stepId ? "addStep" : "editStep", documentId: this.stepId, disableLoader: true, beforeSubmit: async (data) => ({
          ...data,
          ...this.stepInput,
        }) }, h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, this.stepId ? "Edit Step" : "Add Step")), h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12" }, h("fireenjin-input", { required: true, name: "name", label: "Name", labelPosition: "stacked", value: (_a = this.step) === null || _a === void 0 ? void 0 : _a.name }))), h("ion-row", { id: "step-type" }, h("ion-col", { size: "4" }, h("span", { class: {
          active: this.type === "template",
        }, onClick: () => (this.type = "template") }, h("ion-icon", { name: "create" }), h("label", null, "Template"))), h("ion-col", { size: "4" }, h("span", { class: {
          active: this.type === "fields",
        }, onClick: () => (this.type = "fields") }, h("ion-icon", { name: "clipboard" }), h("label", null, "Fields"))), h("ion-col", { size: "4" }, h("span", { class: {
          active: this.type === "component",
        }, onClick: () => (this.type = "component") }, h("ion-icon", { name: "cube" }), h("label", null, "Component"))))), h("ion-accordion-group", { value: this.isAdvancedOpen ? "advanced" : null, onIonChange: (event) => (this.isAdvancedOpen = event.target.value === "advanced") }, h("ion-accordion", { value: "advanced" }, h("ion-item", { slot: "header" }, h("ion-label", null, "Advanced")), h("ion-grid", { slot: "content" }, h("ion-row", null, h("ion-col", { size: "12" }, h("ion-item", { class: "json-editor-field", style: { zIndex: "3" } }, h("ion-label", null, h("h2", null, "Before Html"), this.isAdvancedOpen && (h("fireenjin-code-editor", { ref: (el) => (this.beforeEl = el), autoExpand: true, language: "html", name: "beforeHTML", value: (_b = this.step) === null || _b === void 0 ? void 0 : _b.beforeHTML })))), h("ion-item", { class: "json-editor-field", style: { zIndex: "3" } }, h("ion-label", null, h("h2", null, "After Html"), this.isAdvancedOpen && (h("fireenjin-code-editor", { ref: (el) => (this.afterEl = el), autoExpand: true, language: "html", name: "afterHTML", value: (_c = this.step) === null || _c === void 0 ? void 0 : _c.afterHTML })))), h("fireenjin-select-tags", { ref: (el) => (this.tagsEl = el), name: "tags", labelPosition: "stacked", label: "Tags", value: (_d = this.step) === null || _d === void 0 ? void 0 : _d.tags, allowAdding: true, options: [
          {
            label: "Important",
            value: "important",
          },
        ] }))))))), this.type === "template" && (h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, "Template")), h("floodteam-select-template", { templates: this.templates || [], name: "templateId", label: "Step Template", value: (_f = (_e = this.step) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.id }))), this.type === "component" && (h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, "Component")), h("ion-card-content", null, h("fireenjin-input", { name: "component", label: "Tag Name", labelPosition: "stacked", value: (_g = this.step) === null || _g === void 0 ? void 0 : _g.component }), h("ion-item", { class: "json-editor-field", style: { zIndex: "3" } }, h("ion-label", null, h("h2", null, "Props"), h("fireenjin-code-editor", { autoExpand: true, outputObject: true, language: "json", name: "componentProps", value: (_h = this.step) === null || _h === void 0 ? void 0 : _h.componentProps }))))))), this.type === "fields" && (h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, "Fields", h("ion-button", { size: "small", style: { float: "right" }, disabled: !((_k = (_j = this.step) === null || _j === void 0 ? void 0 : _j.fields) === null || _k === void 0 ? void 0 : _k.length), onClick: () => this.toggleFieldsVisibility() }, this.showFields ? "Hide" : "Show", " Fields"))), this.showFields &&
        (((_l = this.step) === null || _l === void 0 ? void 0 : _l.fields) || []).map((field, index) => (h("ion-item", { button: true, onClick: () => this.fieldSelect(field) }, h("ion-icon", { color: "danger", slot: "end", onClick: (event) => this.deleteField(event, index), name: "trash" }), h("fireenjin-json-viewer", null, JSON.stringify(field, null, 4))))), h("fireenjin-form", { resetButton: null, submitButton: ((_o = (_m = this.step) === null || _m === void 0 ? void 0 : _m.fields) === null || _o === void 0 ? void 0 : _o.length) ? "update Field" : "Add Field", formData: this.step, name: "addFieldForm" }, h("ion-item", { class: "json-editor-field", style: { zIndex: "3" } }, h("ion-label", null, h("h2", null, "Add Fields"), h("fireenjin-code-editor", { ref: (el) => (this.fieldEl = el), autoExpand: true, outputObject: true, language: "json", name: "field", value: this.field || null })))))))), h("ion-tab", { tab: "steps" }, h("ion-content", null, h("ion-card", null, h("ion-item-divider", null, "Steps"), h("ion-grid", null, h("ion-row", null, h("ion-col", null, (this.steps || []).map((step) => (h("ion-item", { title: `${step === null || step === void 0 ? void 0 : step.id} select a step to preview and edit`, button: true, onClick: () => this.stepSelect(step), style: { paddingBottom: ".5rem" } }, isAdmin() && state.claims.role === "tech" && (h("ion-button", { title: `Delete ${step === null || step === void 0 ? void 0 : step.name}`, color: "danger", onClick: () => this.deleteStep(event, step), slot: "end" }, "Delete")), h("ion-label", null, (step === null || step === void 0 ? void 0 : step.name) || "name")))))))))), h("ion-tab", { tab: "stepPreview" }, h("ion-content", null, h("ion-card", null, h("ion-item-divider", null, "Step Preview"), h("fireenjin-flow", { steps: this.stepPreview })))))),
    ];
  }
};
ModalAddStep.style = modalAddStepCss;

export { ModalAddStep as floodteam_modal_add_step };
