import { r as registerInstance, d as createEvent, B as Build, h } from './index-31949dc5.js';
import { a as __decorate } from './tslib.es6-1584b5be.js';
import { s as state } from './store-cca1abc6.js';
import { i as index_min } from './index.min-3591c16e.js';
import './index-afdf7f54.js';
import './getHandlebarsHelpers-ae9bfed4.js';
import './_commonjsHelpers-44457d8d.js';
import './index-e6b3332e.js';
import './localforage-394b59fa.js';

const appTemplateCss = "app-template .tabs-bar{background-color:var(--ion-background-color, #fff) !important}app-template floodteam-floating-button ion-fab{margin-top:20px}app-template .ce-toolbar{background-color:var(--ion-background-color)}app-template .ce-toolbox{background:var(--ion-background-color) !important}app-template ion-item{--background:transparent}app-template .gjs-editor-cont{top:50px}app-template .sample-editor{display:block;height:300px;position:relative;--min-height:300px}app-template ion-item.sample-editor ion-label{position:absolute;top:0;left:0;color:var(--ion-color-medium-shade) !important;font-size:0.75em !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)}app-template .preview-wrapper{margin:30px auto}app-template fireenjin-mx-editor fireenjin-render-template#preview{position:absolute;top:0;bottom:0 !important;left:0;right:0;height:100%}app-template fireenjin-editor{padding-left:0 !important;--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);--ion-color-light-shade:var(--ion-color-base);--ion-color-light-tint:var(--ion-color-base-dark);--ion-background-color:transparent}app-template .pdf-wrapper{background-color:#fff;--ion-text-color:#000}app-template fireenjin-render-template{background-color:#fff;--ion-text-color:#000;color:var(--ion-text-color)}";

const AppTemplate = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinTrigger = createEvent(this, "fireenjinTrigger", 7);
    this.templateId = undefined;
    this.app = undefined;
    this.isLoading = false;
    this.renderedTemplateHtml = undefined;
    this.viewCode = false;
    this.template = undefined;
    this.previewHtml = undefined;
  }
  onTrigger(event) {
    var _a, _b, _c, _d, _e;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.name) === "linkTemplate") {
      window.open(`${((_b = window.location) === null || _b === void 0 ? void 0 : _b.origin) || "."}/templates/${(_e = (_d = (_c = event === null || event === void 0 ? void 0 : event.detail) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.id}`, "_blank");
    }
  }
  onTemplateChange() {
    setTimeout(async () => {
      var _a;
      console.log("template change");
      this.previewHtml = await this.editorEl.generatePreview();
      this.template = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.template;
    }, 500);
  }
  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 sync(template) {
    if (!(template === null || template === void 0 ? void 0 : template.id))
      return;
    let response;
    try {
      response = await fetch(`https://us-central1-${state.config.env === "live" ? "the-flood-team" : "ftms-ca85b"}.cloudfunctions.net/api/template/${template.id}`, {
        method: "POST",
        body: JSON.stringify(template),
      });
    }
    catch (e) {
      console.log("Error syncing template to live site!");
    }
    return (response === null || response === void 0 ? void 0 : response.json) ? response.json() : null;
  }
  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();
  }
  async componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.fireenjinTrigger.emit({
      name: "subscribe",
      payload: {
        collection: "templates",
        id: this.templateId,
        callback: () => {
          this.editorEl.fetchData();
        },
      },
    });
  }
  disconnectedCallback() {
    this.fireenjinTrigger.emit({
      name: "unsubscribe",
      payload: {
        collection: "templates",
        id: this.templateId,
      },
    });
  }
  render() {
    var _a, _b, _c, _d;
    const template = (state.templates || []).find((template) => (template === null || template === void 0 ? void 0 : template.id) === this.templateId);
    const pin = {
      href: `/templates/${this.templateId}`,
      name: (template === null || template === void 0 ? void 0 : template.subject) || "Template",
      icon: "document",
    };
    return [
      h("ion-content", null, h("fireenjin-mx-editor", { app: this.app, class: {
          "is-on-canvas": ["contract", "pdf", "email"].includes(template === null || template === void 0 ? void 0 : template.type),
        }, colors: state.colors, ref: (el) => (this.editorEl = el), templates: state.templates, templateId: this.templateId === "new" ? null : this.templateId, helpers: state === null || state === void 0 ? void 0 : state.helpers, fetch: true })),
      h("floodteam-navigation-footer", null, h("fireenjin-chip-bar", null, h("ion-router-link", { href: "/templates" }, h("ion-chip", { color: "light" }, h("ion-icon", { class: "ft-icon-style", 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", { class: "ft-icon-style", 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.togglePreview) === null || _b === void 0 ? void 0 : _b.call(_a); } }, h("ion-chip", { color: "light" }, h("ion-icon", { class: "ft-icon-style", name: !!((_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.isPreviewing) ? "eye-off" : "eye" }), h("ion-label", null, "Preview"))), 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", { class: "ft-icon-style", name: "information-circle" }), h("ion-label", null, ((_b = this.template) === null || _b === void 0 ? void 0 : _b.name) || ((_c = this.template) === null || _c === void 0 ? void 0 : _c.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", { class: "ft-icon-style", 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", { class: "ft-icon-style", 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", { class: "ft-icon-style", 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", { class: "ft-icon-style", 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", { class: "ft-icon-style", 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", { class: "ft-icon-style", name: "mail" }), h("ion-label", null, "Email"))), h("ion-router-link", { onClick: () => this.openPdfPreview() }, h("ion-chip", { color: "light" }, h("ion-icon", { class: "ft-icon-style", name: "document" }), h("ion-label", null, "PDF"))), h("ion-router-link", { onClick: () => this.fireenjinTrigger.emit({
          name: "pin",
          payload: pin,
        }) }, h("ion-chip", null, h("ion-icon", { name: "pin", class: "ft-icon-style" }), h("ion-label", null, ((_d = ((state === null || state === void 0 ? void 0 : state.pins) || []).map((p) => p === null || p === void 0 ? void 0 : p.href)) === null || _d === void 0 ? void 0 : _d.includes(pin === null || pin === void 0 ? void 0 : pin.href))
        ? "Unpin"
        : "Pin"))))),
    ];
  }
};
__decorate([
  index_min.debounce(2000)
], AppTemplate.prototype, "onTemplateChange", null);
AppTemplate.style = appTemplateCss;

export { AppTemplate as app_template };
