import { r as registerInstance, B as Build, h } from './index-31949dc5.js';
import { a as __decorate } from './tslib.es6-1584b5be.js';
import { i as index_min } from './index.min-3591c16e.js';
import { s as state } from './store-cc0057c0.js';
import './_commonjsHelpers-44457d8d.js';
import './index-afdf7f54.js';

const pageTemplateCss = "fireenjin-mx-page-template .tabs-bar{background-color:var(--ion-background-color, #fff) !important}fireenjin-mx-page-template floodteam-floating-button ion-fab{margin-top:20px}fireenjin-mx-page-template .ce-toolbar{background-color:var(--ion-background-color)}fireenjin-mx-page-template .ce-toolbox{background:var(--ion-background-color) !important}fireenjin-mx-page-template ion-item{--background:transparent}fireenjin-mx-page-template .gjs-editor-cont{top:50px}fireenjin-mx-page-template .sample-editor{display:block;height:300px;position:relative;--min-height:300px}fireenjin-mx-page-template ion-item.sample-editor ion-label{position:absolute;top:0;left:0;color:var(--ion-color-medium-shade) !important;font-size:12px !important;font-weight:bold;text-transform:uppercase;font-family:arial;display:block;background:transparent;text-align:left;padding:0 0 8px 0;font-family:var(--ion-font-family)}fireenjin-mx-page-template fireenjin-editor{--editor-background:var(--ion-color-base);--editor-color:var(--ion-text-color);--editor-color-shadow:var(--ion-color-base-dark);--editor-color-punctuation:rgba(var(--ion-color-secondary-rgb), 0.6);--editor-color-property:var(--ion-color-primary)}fireenjin-mx-page-template .pdf-wrapper{background-color:#fff;--ion-text-color:#000}";

const PageTemplate = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.firstLoad = true;
  }
  onSuccess(event) {
    var _a, _b, _c, _d;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addTemplate" &&
      this.templateId === "new") {
      const routerEl = document.querySelector("ion-router");
      this.templateId = ((_d = (_c = (_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.addTemplate) === null || _d === void 0 ? void 0 : _d.id) || "new";
      if (routerEl)
        routerEl.push(`/templates/${this.templateId}`);
    }
  }
  async onTrigger(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.name) === "preview") {
      state.isPreviewing = !state.isPreviewing;
    }
  }
  onTemplateChange() {
    setTimeout(() => {
      var _a;
      this.template = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.template;
    }, 500);
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.db.watchDocument("templates", this.templateId, ({ data }) => {
      console.log("Template Doc Updated:", data);
      if (!this.firstLoad)
        this.editorEl.fetchData();
      this.firstLoad = false;
    });
  }
  async openPdfPreview() {
    var _a;
    if (!((_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.save))
      return;
    await this.editorEl.save();
    await this.editorEl.generatePdf();
  }
  render() {
    var _a, _b;
    return [
      h("ion-content", null, h("fireenjin-mx-editor", { ref: (el) => (this.editorEl = el),
        // partials={(state?.templates || []).filter(
        //   (template) => template?.partial
        // )}
        // frames={(state?.templates || []).filter(
        //   (template) => template?.type === "frame"
        // )}
        colors: {
          primary: "#004b8f",
          "primary-contrast": "#ffffff",
          secondary: "#0779bf",
          "secondary-contrast": "#ffffff",
          tertiary: "#00b0db",
          "tertiary-contrast": "#000000",
          success: "#95c11f",
          "success-contrast": "#000000",
          warning: "#ffc409",
          "warning-contrast": "#000000",
          danger: "#ff4e6e",
          "danger-contrast": "#000000",
          dark: "#222428",
          "dark-contrast": "#ffffff",
          medium: "#92949c",
          "medium-contrast": "#ffffff",
          light: "#f4f5f8",
          "light-contrast": "#000000",
        }, templates: state === null || state === void 0 ? void 0 : state.templates, templateId: this.templateId === "new" ? null : this.templateId, fetch: true })),
      h("fireenjin-render-template", { style: {
          position: "absolute",
          minHeight: "216px",
          minWidth: "384px",
          maxHeight: "216px",
          maxWidth: "384px",
          bottom: "50px",
          right: "18px",
        }, zoom: "0.2", partials: ((state === null || state === void 0 ? void 0 : state.templates) || []), template: this.template, allowFullscreen: true, enableClicks: true }),
      h("ion-footer", null, h("fireenjin-chip-bar", null, h("ion-router-link", { href: "/templates" }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "arrow-back-circle" }), h("ion-label", null, "Back"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.save) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "save" }), h("ion-label", null, "Save"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openTemplateInfoModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "information-circle" }), h("ion-label", null, ((_a = this.template) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.template) === null || _b === void 0 ? void 0 : _b.subject) || "Info"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openLayoutModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "scan" }), h("ion-label", null, "Layout"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openSampleDataModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "document-text" }), h("ion-label", null, "Sample Data"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openHeadModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "search-circle" }), h("ion-label", null, "Edit Head"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openRoutesModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "globe" }), h("ion-label", null, "Edit Routes"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openCodeModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "code-slash" }), h("ion-label", null, "Code"))), h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openSendEmailModal) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "mail" }), h("ion-label", null, "Email"))), h("ion-router-link", { onClick: () => this.openPdfPreview() }, h("ion-chip", { color: "light" }, h("ion-icon", { name: "document" }), h("ion-label", null, "PDF"))))),
    ];
  }
};
__decorate([
  index_min.debounce(500)
], PageTemplate.prototype, "onTemplateChange", null);
PageTemplate.style = pageTemplateCss;

export { PageTemplate as fireenjin_mx_page_template };
