import "@fireenjin/mx";
import * as jsonLogic from "json-logic-js";
import { Build, Component, Element, Event, h, Listen, Prop, State, } from "@stencil/core";
import state from "../../../store";
export class AppTemplate {
  constructor() {
    this.isLoading = false;
    this.viewCode = false;
  }
  onSuccess(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "findTemplate") {
      this.template = ((_c = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.template) || null;
    }
    else if (((_d = event === null || event === void 0 ? void 0 : event.detail) === null || _d === void 0 ? void 0 : _d.endpoint) === "addTemplate" &&
      this.templateId === "new") {
      const routerEl = document.querySelector("ion-router");
      this.templateId = ((_g = (_f = (_e = event === null || event === void 0 ? void 0 : event.detail) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.addTemplate) === null || _g === void 0 ? void 0 : _g.id) || "new";
      if (routerEl)
        routerEl.push(`/templates/${this.templateId}`);
    }
    else if (((_h = event === null || event === void 0 ? void 0 : event.detail) === null || _h === void 0 ? void 0 : _h.endpoint) === "editTemplate") {
      if ((_j = this.editorEl) === null || _j === void 0 ? void 0 : _j.fetchData)
        this.editorEl.fetchData();
    }
  }
  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();
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.editorEl.fetchData();
    // this.db.watchDocument("templates", this.templateId, () => {
    //   this.editorEl.fetchData();
    // });
  }
  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 [
      h("ion-content", null,
        h("fireenjin-mx-editor", { class: {
            "is-on-canvas": ["contract", "pdf", "email"].includes((_b = this.template) === null || _b === void 0 ? void 0 : _b.type),
          }, ref: (el) => (this.editorEl = el), templateData: (_c = this.template) === null || _c === void 0 ? void 0 : _c.sampleData, isPreviewing: state === null || state === void 0 ? void 0 : state.isPreviewing, templateId: this.templateId, partials: ((_d = state === null || state === void 0 ? void 0 : state.templates) === null || _d === void 0 ? void 0 : _d.length)
            ? state.templates
              .filter((template) => !!(template === null || template === void 0 ? void 0 : template.partial))
              .map((partial) => ({
              html: (partial === null || partial === void 0 ? void 0 : partial.html) || "",
              id: (partial === null || partial === void 0 ? void 0 : partial.id) || null,
            }))
            : [], helpers: {
            formatUSD: (amount) => {
              const formatter = new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: "USD",
                minimumFractionDigits: 2,
              });
              return formatter.format(amount ? amount : 0);
            },
            logic: (context, rules, tempData) => jsonLogic.apply(JSON.parse(rules.replace('"@tempData"', tempData)), {
              ...context,
              tempData,
            }),
          }, types: [
            {
              label: "Component",
              value: "component",
            },
            {
              label: "Email",
              value: "email",
            },
            {
              label: "Contract",
              value: "contract",
            },
            {
              label: "PDF",
              value: "pdf",
            },
            {
              label: "Feed Card",
              value: "feed",
            },
            {
              label: "Message",
              value: "message",
            },
            {
              label: "Web Page",
              value: "page",
            },
          ] })),
      h("floodteam-navigation-footer", null,
        h("fireenjin-chip-bar", null,
          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", null,
              h("ion-icon", { name: "save", class: "ft-icon-style" }),
              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", null,
              h("ion-icon", { name: !!((_e = this.editorEl) === null || _e === void 0 ? void 0 : _e.isPreviewing) ? "eye-off" : "eye", class: "ft-icon-style" }),
              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", null,
              h("ion-icon", { name: "information", class: "ft-icon-style" }),
              h("ion-label", null, "Info"))),
          h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openHeaderModal) === null || _b === void 0 ? void 0 : _b.call(_a); } },
            h("ion-chip", null,
              h("ion-icon", { name: "code-slash", class: "ft-icon-style" }),
              h("ion-label", null, "Header"))),
          h("ion-router-link", { onClick: () => { var _a, _b; return (_b = (_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.openFooterModal) === null || _b === void 0 ? void 0 : _b.call(_a); } },
            h("ion-chip", null,
              h("ion-icon", { name: "code-slash", class: "ft-icon-style" }),
              h("ion-label", null, "Footer"))),
          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", null,
              h("ion-icon", { name: "code-slash", class: "ft-icon-style" }),
              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.openRoutesModal) === null || _b === void 0 ? void 0 : _b.call(_a); } },
            h("ion-chip", null,
              h("ion-icon", { name: "code-slash", class: "ft-icon-style" }),
              h("ion-label", null, "Routes"))),
          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", null,
              h("ion-icon", { name: "mail", class: "ft-icon-style" }),
              h("ion-label", null, "Email"))),
          h("ion-router-link", { onClick: () => this.openPdfPreview() },
            h("ion-chip", null,
              h("ion-icon", { name: "document", class: "ft-icon-style" }),
              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, ((_f = ((state === null || state === void 0 ? void 0 : 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"))))),
    ];
  }
  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": {}
  }; }
  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": "fireenjinSuccess",
      "method": "onSuccess",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
//# sourceMappingURL=app-template.js.map