import { h, } from "@stencil/core";
import { toastController } from "@ionic/core";
import state from "../../../store";
export class ModalNote {
  constructor() {
    this.steps = ["note", "options", "preview"];
    this.heading = "Add a Note";
    this.jobId = undefined;
    this.userId = undefined;
    this.note = {};
    this.noteInput = {};
    this.previewHTML = undefined;
  }
  async onEditorChange() {
    var _a;
    if (!((_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.exportHTML))
      return;
    this.previewHTML = await this.editorEl.exportHTML();
  }
  async onChange(event) {
    var _a, _b, _c, _d;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "sendAlert") {
      this.noteInput.sendAlert = !!((_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.checked);
    }
    else if (((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.name) === "tags") {
      this.noteInput.tags = ((_d = event === null || event === void 0 ? void 0 : event.target) === null || _d === void 0 ? void 0 : _d.value) ? event.target.value : [];
    }
  }
  onReset(event) {
    var _a;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addNote") {
      const modalEl = document.querySelector("ion-modal.modal-note");
      if (modalEl === null || modalEl === void 0 ? void 0 : modalEl.dismiss) {
        modalEl.dismiss();
      }
    }
  }
  async onSuccess(event) {
    var _a;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addNote") {
      const photoCarouselModalEl = document.querySelector("ion-modal.modal-note");
      if (photoCarouselModalEl === null || photoCarouselModalEl === void 0 ? void 0 : photoCarouselModalEl.dismiss) {
        await photoCarouselModalEl.dismiss();
        this.presentToast();
      }
    }
  }
  async presentToast() {
    const toast = await toastController.create({
      message: `Note has been added successfully!`,
      duration: 2000,
    });
    toast.present();
  }
  render() {
    var _a, _b;
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.heading), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.floodteamCloseModal.emit() }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null, h("ion-tabs", { ref: (el) => (this.tabsEl = el) }, h("ion-tab-bar", { ref: (el) => (this.tabBarEl = el), slot: "top" }, h("ion-tab-button", { tab: "note" }, h("ion-icon", { name: "create" }), h("ion-label", null, "Note")), h("ion-tab-button", { tab: "options" }, h("ion-icon", { name: "cog" }), h("ion-label", null, "Options")), h("ion-tab-button", { tab: "preview" }, h("ion-icon", { name: "eye" }), h("ion-label", null, "Preview"))), h("ion-tab", { tab: "note" }, h("ion-content", null, h("ion-card", { style: {
          overflow: "visible",
        } }, h("fireenjin-form", { name: "note", endpoint: "addNote", beforeSubmit: async (data) => ({
          ...this.noteInput,
          ...data,
          jobId: this.jobId,
          userId: this.userId,
          html: this.previewHTML,
        }), submitButton: "Save", resetButton: "Cancel", resetButtonColor: "medium", disableLoader: true, disableEnterButton: true }, h("fireenjin-editor", { partials: state.templates, ref: (el) => (this.editorEl = el) }))))), h("ion-tab", { tab: "options" }, h("ion-content", null, h("ion-card", { class: "ion-padding", style: {
          overflow: "visible",
        } }, h("fireenjin-form", { name: "note", hideControls: true }, h("fireenjin-toggle", { label: "Send an Alert", name: "sendAlert", value: !!((_a = this.note) === null || _a === void 0 ? void 0 : _a.alert) }), h("fireenjin-select-tags", { name: "tags", label: "Tags", labelPosition: "stacked", value: ((_b = this.note) === null || _b === void 0 ? void 0 : _b.tags) ? this.note.tags : [], allowAdding: true, options: [
          {
            label: "Important",
            value: "important",
          },
          {
            label: "Referral",
            value: "referral",
          },
          {
            label: "Plumber",
            value: "plumber",
          },
          {
            label: "Staff",
            value: "staff",
          },
          {
            label: "Agent",
            value: "agent",
          },
          {
            label: "Property Manager",
            value: "property manager",
          },
          {
            label: "PEU",
            value: "peu",
          },
        ] }))))), h("ion-tab", { tab: "preview" }, h("ion-content", null, h("ion-card", { class: "ion-padding" }, h("floodteam-template", { templateId: "fBRGqXAzDw8CwFfJtQgJ", data: {
          html: this.previewHTML ? this.previewHTML : "",
          user: state === null || state === void 0 ? void 0 : state.profile,
          createdAt: new Date(),
        } })))))),
    ];
  }
  static get is() { return "modal-note"; }
  static get originalStyleUrls() {
    return {
      "$": ["modal-note.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["modal-note.css"]
    };
  }
  static get properties() {
    return {
      "heading": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "heading",
        "reflect": false,
        "defaultValue": "\"Add a Note\""
      },
      "jobId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "job-id",
        "reflect": false
      },
      "userId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "user-id",
        "reflect": false
      },
      "note": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "Note",
          "resolved": "{ __typename?: \"Note\"; alert?: Alert; company?: Company; createdAt?: string; createdBy?: User; html?: string; id?: string; job?: Job; location?: Location; sendAlert?: boolean; subject?: string; tags?: string[]; updatedAt?: string; updatedBy?: User; user?: User; userIds?: string[]; }",
          "references": {
            "Note": {
              "location": "import",
              "path": "../../../sdk"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "{}"
      }
    };
  }
  static get states() {
    return {
      "noteInput": {},
      "previewHTML": {}
    };
  }
  static get events() {
    return [{
        "method": "floodteamCloseModal",
        "name": "floodteamCloseModal",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "fireenjinFetch",
        "name": "fireenjinFetch",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "fireenjinChange",
        "method": "onEditorChange",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "ionChange",
        "method": "onChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "fireenjinReset",
        "method": "onReset",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "fireenjinSuccess",
        "method": "onSuccess",
        "target": "body",
        "capture": false,
        "passive": false
      }];
  }
}
