'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-e0385008.js');
const tslib_es6 = require('./tslib.es6-8eb3c9db.js');
const store = require('./store-8d1de66f.js');
const index_min = require('./index.min-0ca13044.js');
require('./index-37fc02d8.js');
require('./getHandlebarsHelpers-1b368c8a.js');
require('./_commonjsHelpers-a5111d61.js');
require('./index-ba857994.js');
require('./localforage-af1b8c0e.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) {
    index.registerInstance(this, hostRef);
    this.fireenjinTrigger = index.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-${store.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 (!(index.Build === null || index.Build === void 0 ? void 0 : index.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, _e, _f;
    const pin = {
      href: `/templates/${this.templateId}`,
      name: ((_a = this.template) === null || _a === void 0 ? void 0 : _a.subject) || "Template",
      icon: "document",
    };
    return [
      index.h("ion-content", null, index.h("fireenjin-mx-editor", { app: this.app, class: {
          "is-on-canvas": ["contract", "pdf", "email"].includes((_b = this.template) === null || _b === void 0 ? void 0 : _b.type),
        }, colors: store.state.colors, ref: (el) => (this.editorEl = el), templates: store.state.templates, templateId: this.templateId === "new" ? null : this.templateId, helpers: store.state === null || store.state === void 0 ? void 0 : store.state.helpers, fetch: true })),
      index.h("floodteam-navigation-footer", null, index.h("fireenjin-chip-bar", null, index.h("ion-router-link", { href: "/templates" }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "arrow-back-circle" }), index.h("ion-label", null, "Back"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "save" }), index.h("ion-label", null, "Save"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: !!((_c = this.editorEl) === null || _c === void 0 ? void 0 : _c.isPreviewing) ? "eye-off" : "eye" }), index.h("ion-label", null, "Preview"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "information-circle" }), index.h("ion-label", null, ((_d = this.template) === null || _d === void 0 ? void 0 : _d.name) || ((_e = this.template) === null || _e === void 0 ? void 0 : _e.subject) || "Info"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "scan" }), index.h("ion-label", null, "Layout"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "document-text" }), index.h("ion-label", null, "Sample Data"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "search-circle" }), index.h("ion-label", null, "Edit Head"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "globe" }), index.h("ion-label", null, "Edit Routes"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "code-slash" }), index.h("ion-label", null, "Code"))), index.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); } }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "mail" }), index.h("ion-label", null, "Email"))), index.h("ion-router-link", { onClick: () => this.openPdfPreview() }, index.h("ion-chip", { color: "light" }, index.h("ion-icon", { class: "ft-icon-style", name: "document" }), index.h("ion-label", null, "PDF"))), index.h("ion-router-link", { onClick: () => this.fireenjinTrigger.emit({
          name: "pin",
          payload: pin,
        }) }, index.h("ion-chip", null, index.h("ion-icon", { name: "pin", class: "ft-icon-style" }), index.h("ion-label", null, ((_f = ((store.state === null || store.state === void 0 ? void 0 : store.state.pins) || []).map((p) => p === null || p === void 0 ? void 0 : p.href)) === null || _f === void 0 ? void 0 : _f.includes(pin === null || pin === void 0 ? void 0 : pin.href))
        ? "Unpin"
        : "Pin"))))),
    ];
  }
};
tslib_es6.__decorate([
  index_min.index_min.debounce(2000)
], AppTemplate.prototype, "onTemplateChange", null);
AppTemplate.style = appTemplateCss;

exports.app_template = AppTemplate;
