import { __decorate } from "tslib";
import "@fireenjin/mx";
import { Build, Component, Element, Event, h, Listen, Prop, State, } from "@stencil/core";
import state from "../../../store";
import { debounce } from "typescript-debounce-decorator";
export class AppTemplate {
  constructor() {
    this.isLoading = false;
    this.viewCode = false;
  }
  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, _e;
    const template = ((state === null || state === void 0 ? void 0 : 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", { class: {
            "is-on-canvas": ["contract", "pdf", "email"].includes(template === null || template === void 0 ? void 0 : template.type),
          }, colors: {
            primary: "#2473bb",
            "primary-contrast": "#ffffff",
            secondary: "#54b6e7",
            "secondary-contrast": "#000000",
            tertiary: "#1e3955",
            "tertiary-contrast": "#ffffff",
            success: "#79c79d",
            "success-contrast": "#000000",
            warning: "#ffc723",
            "warning-contrast": "#000000",
            danger: "#db3a5e",
            "danger-contrast": "#ffffff",
            dark: "#08141c",
            "dark-contrast": "#ffffff",
            medium: "#bebebe",
            "medium-contrast": "#000000",
            light: "#F6F6F6",
            "light-contrast": "#000000",
          }, ref: (el) => (this.editorEl = el), templates: state === null || state === void 0 ? void 0 : state.templates, templateId: this.templateId === "new" ? null : this.templateId, helpers: state === null || state === void 0 ? void 0 : state.helpers, fetch: true })),
      h("fireenjin-render-template", { style: {
          display: ((_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.isPreviewing) ? "none" : "block",
          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, helpers: state === null || state === void 0 ? void 0 : state.helpers, allowFullscreen: true, enableClicks: 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: !!((_b = this.editorEl) === null || _b === void 0 ? void 0 : _b.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, ((_c = this.template) === null || _c === void 0 ? void 0 : _c.name) || ((_d = this.template) === null || _d === void 0 ? void 0 : _d.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, ((_e = ((state === null || state === void 0 ? void 0 : state.pins) || []).map((p) => p === null || p === void 0 ? void 0 : p.href)) === null || _e === void 0 ? void 0 : _e.includes(pin === null || pin === void 0 ? void 0 : pin.href))
                ? "Unpin"
                : "Pin"))))),
    ];
  }
  static get is() { return "app-template"; }
  static get originalStyleUrls() { return {
    "$": ["app-template.css"]
  }; }
  static get styleUrls() { return {
    "$": ["app-template.css"]
  }; }
  static get properties() { return {
    "templateId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "template-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isLoading": {},
    "renderedTemplateHtml": {},
    "viewCode": {},
    "template": {},
    "previewHtml": {}
  }; }
  static get events() { return [{
      "method": "fireenjinTrigger",
      "name": "fireenjinTrigger",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinTriggerInput",
        "resolved": "FireEnjinTriggerInput",
        "references": {
          "FireEnjinTriggerInput": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }]; }
  static get elementRef() { return "appTemplateEl"; }
  static get listeners() { return [{
      "name": "fireenjinTrigger",
      "method": "onTrigger",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "templateChange",
      "method": "onTemplateChange",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "fireenjinSuccess",
      "method": "onSuccess",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "ionRouteDidChange",
      "method": "componentDidLoad",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
__decorate([
  debounce(2000)
], AppTemplate.prototype, "onTemplateChange", null);
//# sourceMappingURL=app-template.js.map