import { r as registerInstance, d as createEvent, h, e as getElement } from './index-000d2977.js';

const modalLayoutCss = "fireenjin-mx-modal-layout fireenjin-render-template{height:200px !important;width:200px !important}";

const ModalLayout = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinTrigger = createEvent(this, "fireenjinTrigger", 7);
    this.pageTitle = "Edit Layout";
    this.template = {};
    this.partials = [];
    this.hideTemplateSelect = false;
    this.showAdvanced = false;
    this.helpers = {
      formatUSD: (amount) => {
        const formatter = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
          minimumFractionDigits: 2,
        });
        return formatter.format(amount ? amount : 0);
      },
    };
    this.types = [
      {
        label: "Component",
        value: "component",
      },
      {
        label: "Email",
        value: "email",
      },
      {
        label: "Contract",
        value: "contract",
      },
      {
        label: "Frame",
        value: "frame",
      },
      {
        label: "PDF",
        value: "pdf",
      },
      {
        label: "Feed Card",
        value: "feed",
      },
      {
        label: "Message",
        value: "message",
      },
      {
        label: "Web Page",
        value: "page",
      },
    ];
  }
  async onSubmit() {
    this.fireenjinTrigger.emit({ name: "closeModal" });
  }
  async onReset() {
    this.fireenjinTrigger.emit({ name: "closeModal" });
  }
  async onChange(event) {
    var _a, _b, _c;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "frameId") {
      this.template = {
        ...this.template,
        frame: (this.frames || []).find((frame) => { var _a; return (frame === null || frame === void 0 ? void 0 : frame.id) === ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }) || null,
      };
    }
    else if (((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.name) === "headerId") {
      this.template = {
        ...this.template,
        header: (this.partials || []).find((partial) => { var _a; return (partial === null || partial === void 0 ? void 0 : partial.id) === ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }),
      };
    }
    else if (((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.name) === "footerId") {
      this.template = {
        ...this.template,
        footer: (this.partials || []).find((partial) => { var _a; return (partial === null || partial === void 0 ? void 0 : partial.id) === ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }),
      };
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    const frameOptions = [
      ...(this.frames || []),
      { subject: "None", id: null },
    ];
    console.log(frameOptions);
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.pageTitle), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.formEl.submit() }, h("ion-icon", { slot: "icon-only", name: "save" })), h("ion-button", { onClick: () => this.fireenjinTrigger.emit({
          name: "closeModal",
          el: this.modalEl,
          component: "mx-modal-send-email",
        }) }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null, h("fireenjin-form", { ref: (el) => (this.formEl = el), endpoint: this.templateId ? "editTemplate" : "addTemplate", documentId: this.templateId, hideControls: true, beforeSubmit: async (data) => ({
          ...data,
        }) }, h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", sizeMd: "7" }, h("fireenjin-select", { name: "type", label: "Type", labelPosition: "stacked", placeholder: "Select Type", value: (_a = this.template) === null || _a === void 0 ? void 0 : _a.type, interface: "action-sheet", options: this.types }), h("fireenjin-select", { disabled: this.hideTemplateSelect, name: "frameId", label: "Frame Template", labelPosition: "stacked", placeholder: "Select Frame Template", value: ((_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.frame) === null || _c === void 0 ? void 0 : _c.id) || null, options: frameOptions.map((frame) => ({
          label: frame === null || frame === void 0 ? void 0 : frame.subject,
          value: frame === null || frame === void 0 ? void 0 : frame.id,
        })), interface: "action-sheet" })), h("ion-col", { size: "12", sizeMd: "5" }, h("fireenjin-render-template", { id: "email-preview", template: ((this === null || this === void 0 ? void 0 : this.frames) || []).find((template) => { var _a, _b; return (template === null || template === void 0 ? void 0 : template.id) === ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.frame) === null || _b === void 0 ? void 0 : _b.id); }), data: ((_d = this.template) === null || _d === void 0 ? void 0 : _d.sampleData) || {}, helpers: this.helpers || {}, partials: (this.frames || []).map((frame) => ({
          html: (frame === null || frame === void 0 ? void 0 : frame.html) || "",
          id: (frame === null || frame === void 0 ? void 0 : frame.id) || null,
        })) })))), h("ion-accordion-group", null, h("ion-accordion", null, h("ion-item", { slot: "header" }, h("ion-label", null, "Advanced")), h("ion-grid", { slot: "content" }, h("ion-row", null, h("ion-col", { size: "12", sizeMd: "6" }, h("fireenjin-select", { disabled: this.hideTemplateSelect, name: "headerId", label: "Header Template", labelPosition: "stacked", placeholder: "Select Header Template", value: ((_f = (_e = this.template) === null || _e === void 0 ? void 0 : _e.header) === null || _f === void 0 ? void 0 : _f.id) || null, options: [
          ...((this === null || this === void 0 ? void 0 : this.partials) || []),
          { subject: "None", id: null },
        ].map((template) => ({
          label: template === null || template === void 0 ? void 0 : template.subject,
          value: template === null || template === void 0 ? void 0 : template.id,
        })), interface: "action-sheet" }), h("fireenjin-render-template", { id: "email-preview", template: ((this === null || this === void 0 ? void 0 : this.partials) || []).find((template) => { var _a, _b; return (template === null || template === void 0 ? void 0 : template.id) === ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.id); }), data: ((_g = this.template) === null || _g === void 0 ? void 0 : _g.sampleData) || {}, helpers: this.helpers || {}, partials: this.partials || [] })), h("ion-col", { size: "12", sizeMd: "6" }, h("fireenjin-select", { disabled: this.hideTemplateSelect, name: "footerId", label: "Footer Template", labelPosition: "stacked", placeholder: "Select Footer Template", value: ((_j = (_h = this.template) === null || _h === void 0 ? void 0 : _h.footer) === null || _j === void 0 ? void 0 : _j.id) || null, options: [
          ...((this === null || this === void 0 ? void 0 : this.partials) || []),
          { subject: "None", id: null },
        ].map((template) => ({
          label: template === null || template === void 0 ? void 0 : template.subject,
          value: template === null || template === void 0 ? void 0 : template.id,
        })), interface: "action-sheet" }), h("fireenjin-render-template", { id: "email-preview", template: ((this === null || this === void 0 ? void 0 : this.partials) || []).find((template) => { var _a, _b; return (template === null || template === void 0 ? void 0 : template.id) === ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.footer) === null || _b === void 0 ? void 0 : _b.id); }), data: ((_k = this.template) === null || _k === void 0 ? void 0 : _k.sampleData) || {}, helpers: this.helpers || {}, partials: this.partials || [] })))))))),
    ];
  }
  get modalEl() { return getElement(this); }
};
ModalLayout.style = modalLayoutCss;

export { ModalLayout as fireenjin_mx_modal_layout };
