import { r as registerInstance, d as createEvent, B as Build, h } from './index-000d2977.js';
import { r as ref, u as uploadBytes, a as getDownloadURL, g as getStorage } from './index.esm2017-46fbd116.js';
import { t as toastController } from './overlays-1080973b.js';
import { s as state } from './store-2624d5cd.js';
import './index.esm2017-93b8100c.js';
import './ionic-global-8913b6b6.js';
import './helpers-7e937ffa.js';
import './index-ac0c2732.js';
import './getHandlebarsHelpers-1f444a62.js';
import './_commonjsHelpers-44457d8d.js';
import './index-d4e79b88.js';
import './localforage-394b59fa.js';

const modalSupportCss = "modal-support fireenjin-editor{width:calc(100% - 75px);margin:0 0 0 60px}modal-support fireenjin-editor .codex-editor__redactor{padding-bottom:0 !important}@media only screen and (max-width: 800px){.modal-support{--width:100%;--max-width:auto}}";

const ModalSupport = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.floodteamCloseModal = createEvent(this, "floodteamCloseModal", 7);
    this.fireenjinFetch = createEvent(this, "fireenjinFetch", 7);
    this.fireenjinUpload = createEvent(this, "fireenjinUpload", 7);
    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) }))))))),
    ];
  }
};
ModalSupport.style = modalSupportCss;

export { ModalSupport as modal_support };
