import { Component, Event, Prop, h, Listen, State, Build, } from "@stencil/core";
import { getStorage, getDownloadURL, ref, uploadBytes, } from "firebase/storage";
import { toastController } from "@ionic/core";
import state from "../../../store";
export class ModalSupport {
  constructor() {
    this.heading = "Get Help";
    this.ticket = {};
    this.ticketInput = {};
  }
  async onEditorChange() {
    var _a;
    if (!((_a = this.editorEl) === null || _a === void 0 ? void 0 : _a.exportHTML))
      return;
    this.previewHTML = await this.editorEl.exportHTML();
    this.editor = await (await this.editorEl.getInstance()).save();
  }
  async onChange(event) {
    var _a, _b;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "tags") {
      this.ticketInput.tags = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) ? event.target.value : [];
    }
  }
  onReset(event) {
    var _a;
    if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "addSupport") {
      const modalEl = document.querySelector("ion-modal.modal-support");
      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) === "addSupport") {
      const modalSupportEl = document.querySelector("ion-modal.modal-support");
      if (modalSupportEl === null || modalSupportEl === void 0 ? void 0 : modalSupportEl.dismiss) {
        await modalSupportEl.dismiss();
        this.presentToast();
      }
    }
  }
  async presentToast() {
    const toast = await toastController.create({
      message: `Feedback has been sent successfully!`,
      duration: 2000,
    });
    toast.present();
  }
  getExtension(path) {
    var basename = path.split(/[\\/]/).pop(), // extract file name from full path ...
    // (supports `\\` and `/` separators)
    pos = basename.lastIndexOf("."); // get last position of `.`
    if (basename === "" || pos < 1)
      // if file name is empty or ...
      return ""; //  `.` not found (-1) or comes first (0)
    return basename.slice(pos + 1); // extract extension ignoring `.`
  }
  async onPhotoUpload(event) {
    var _a;
    const storageRef = ref(this.storage, `${new Date().toISOString()}.${this.getExtension((_a = event === null || event === void 0 ? void 0 : event.file) === null || _a === void 0 ? void 0 : _a.name)}`);
    const upload = await uploadBytes(storageRef, event.file);
    const url = await getDownloadURL(upload.ref);
    return {
      success: true,
      file: {
        url,
      },
    };
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.storage = getStorage();
  }
  render() {
    var _a, _b, _c, _d, _e;
    return [
      h("ion-header", null,
        h("ion-toolbar", null,
          h("ion-title", null, this.heading),
          h("ion-buttons", { slot: "end" },
            h("ion-button", { onClick: () => { var _a, _b; return (_b = (_a = this.formEl) === null || _a === void 0 ? void 0 : _a.submit) === null || _b === void 0 ? void 0 : _b.call(_a); }, color: "primary", fill: "solid" }, "Send"),
            h("ion-button", { onClick: () => this.floodteamCloseModal.emit() },
              h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", null,
        h("ion-grid", null,
          h("ion-row", null,
            h("ion-col", { class: "ion-padding" },
              h("ion-text", { color: "medium" }, "Select the type of support you require and then give us a brief summary of your issue and someone will follow up with you."))),
          h("ion-row", null,
            h("ion-col", { class: "ion-padding" },
              h("ion-card", { style: {
                  overflow: "visible",
                } },
                h("fireenjin-form", { name: "support", endpoint: "addSupport", beforeSubmit: (data) => ({
                    ...this.ticketInput,
                    ...data,
                    userId: this.userId,
                    html: this.previewHTML,
                    editor: this.editor,
                  }), ref: (el) => (this.formEl = el), submitButton: "Submit", resetButton: "Cancel", resetButtonColor: "medium", hideControls: true, disableLoader: true, disableEnterButton: true },
                  h("ion-item", { lines: "inset" },
                    h("fireenjin-avatar", { slot: "start", style: {
                        display: "inline-block",
                        position: "relative",
                        borderRadius: "4px",
                        padding: "0 !important",
                        overflow: "hidden",
                      }, initials: `${((_a = state === null || state === void 0 ? void 0 : state.profile) === null || _a === void 0 ? void 0 : _a.firstName)
                        ? (_b = state === null || state === void 0 ? void 0 : state.profile) === null || _b === void 0 ? void 0 : _b.firstName.charAt(0)
                        : ""}${((_c = state === null || state === void 0 ? void 0 : state.profile) === null || _c === void 0 ? void 0 : _c.lastName)
                        ? (_d = state === null || state === void 0 ? void 0 : state.profile) === null || _d === void 0 ? void 0 : _d.lastName.charAt(0)
                        : ""}`, src: (_e = state === null || state === void 0 ? void 0 : state.profile) === null || _e === void 0 ? void 0 : _e.photo }),
                    h("fireenjin-select", { name: "type", label: "Type", labelPosition: "stacked", options: [
                        { label: "Bug", value: "Bug 🐞" },
                        { label: "Feedback", value: "Task ✅" },
                      ], value: "Task ✅" })),
                  h("fireenjin-editor", { style: { minHeight: "50px" }, autofocus: true, ref: (el) => (this.editorEl = el), uploadCallback: (event) => this.onPhotoUpload(event) }))))))),
    ];
  }
  static get is() { return "modal-support"; }
  static get originalStyleUrls() { return {
    "$": ["modal-support.css"]
  }; }
  static get styleUrls() { return {
    "$": ["modal-support.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": "\"Get Help\""
    },
    "userId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-id",
      "reflect": false
    },
    "ticket": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Support",
        "resolved": "{ __typename?: \"Support\"; assignedTo?: User; createdAt?: string; createdBy?: User; editor?: Editor; html?: string; id?: string; name?: string; notionPageId?: string; tags?: string[]; type?: string; updatedAt?: string; updatedBy?: User; }",
        "references": {
          "Support": {
            "location": "import",
            "path": "../../../sdk"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{}"
    }
  }; }
  static get states() { return {
    "ticketInput": {},
    "previewHTML": {},
    "editor": {}
  }; }
  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": {}
      }
    }, {
      "method": "fireenjinUpload",
      "name": "fireenjinUpload",
      "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
    }]; }
}
//# sourceMappingURL=modal-support.js.map