'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ee190ee0.js');
const index_esm2017 = require('./index.esm2017-c1d846c3.js');
require('./process-es6-36bf0e9c.js');

async function openFileSelect({ multiple, required, accept, }) {
  return new Promise((resolve, reject) => {
    try {
      const fileInputEl = document.createElement("input");
      fileInputEl.type = "file";
      fileInputEl.required = !!required;
      if (accept)
        fileInputEl.accept = accept;
      if (multiple) {
        fileInputEl.multiple = true;
      }
      fileInputEl.onchange = (e) => {
        resolve(Array.from(e.target.files));
      };
      fileInputEl.click();
    }
    catch (e) {
      reject(e);
    }
  });
}

const uploadButtonCss = "";

const UploadButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.fireenjinUpload = index.createEvent(this, "fireenjinUpload", 7);
    this.fireenjinSubmit = index.createEvent(this, "fireenjinSubmit", 7);
    this.ionChange = index.createEvent(this, "ionChange", 7);
    this.path = undefined;
    this.fileName = undefined;
    this.color = "primary";
    this.placeholder = undefined;
    this.iconEnd = "cloud-upload";
    this.iconStart = undefined;
    this.fill = "outline";
    this.expand = "block";
    this.shape = "round";
    this.multiple = false;
    this.endpoint = "upload";
    this.name = "file";
    this.disabled = false;
    this.value = undefined;
    this.label = undefined;
    this.showLink = false;
    this.showClear = false;
    this.accept = undefined;
    this.required = false;
    this.autoSubmit = false;
    this.submitEndpoint = undefined;
    this.documentId = undefined;
    this.uploading = false;
    this.complete = false;
  }
  async onSuccess(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    if ((_c = (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, "autosubmit-"))
      return;
    this.uploading = false;
    this.clearProgressBar();
    this.value = await index_esm2017.getDownloadURL((_e = (_d = event === null || event === void 0 ? void 0 : event.detail) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.ref);
    this.label = (_h = (_g = (_f = event === null || event === void 0 ? void 0 : event.detail) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.name;
    this.ionChange.emit({
      name: this.name,
      value: this.value,
      event,
    });
    if (this.autoSubmit)
      this.fireenjinSubmit.emit({
        event,
        endpoint: this.submitEndpoint || this.endpoint,
        name: `autosubmit-${this.name}`,
        id: this.documentId,
        data: {
          [this.name]: this.value,
        },
      });
  }
  onError(event) {
    console.log(event);
    this.uploading = false;
    this.clearProgressBar();
  }
  onProgress({ detail: { progress } }) {
    if (progress)
      this.setProgressBarColor(progress);
  }
  async clear() {
    this.clearProgressBar();
    this.value = null;
    this.ionChange.emit({
      name: this.name,
      value: this.value,
    });
  }
  clearProgressBar() {
    this.label = null;
    this.buttonEl.style.background = "transparent";
  }
  setProgressBarColor(progress) {
    const colorStop1 = `rgba(var(--ion-color-${this.color || "primary"}-rgb), 0.1)`;
    const colorStop2 = `rgba(var(--ion-color-${this.color || "primary"}-rgb), 0.3)`;
    const colorStop3 = `rgba(var(--ion-color-${this.color || "primary"}-rgb), 0)`;
    const colorStops = `${colorStop1} 0%, ${colorStop2} ${progress * 100}%, ${colorStop3} ${progress * 100}%`;
    this.buttonEl.style.background = `linear-gradient(to right, ${colorStops})`;
  }
  async uploadFiles(event) {
    const files = await openFileSelect({
      multiple: this.multiple,
      accept: this.accept,
      required: this.required,
    });
    if (!(files === null || files === void 0 ? void 0 : files.length))
      return;
    this.uploading = true;
    for (const file of files || []) {
      this.fireenjinUpload.emit({
        event,
        endpoint: this.endpoint,
        name: this.name,
        data: {
          file,
          path: this.path,
          fileName: this.fileName,
        },
      });
    }
  }
  render() {
    return (index.h(index.Host, { class: {
        "upload-complete": this.complete,
        "upload-running": this.uploading,
      } }, index.h("ion-button", { class: "upload-button", ref: (el) => (this.buttonEl = el), fill: this.fill, expand: this.expand, shape: this.shape, color: this.color, onClick: (event) => this.uploadFiles(event), style: {
        "border-radius": "var(--border-radius)",
        overflow: "hidden",
        transition: "all ease 0.1s",
      }, disabled: this.disabled }, this.iconStart && index.h("ion-icon", { slot: "start", name: this.iconStart }), this.uploading ? (index.h("ion-font", null, "Uploading")) : (index.h("ion-label", { style: {
        maxWidth: "90%",
        overflow: "hidden",
        textOverflow: "ellipsis",
      } }, this.label || this.placeholder || "", index.h("slot", null))), this.iconEnd && !this.uploading && (index.h("ion-icon", { slot: "end", name: this.iconEnd })), this.uploading && (index.h("ion-spinner", { slot: "end", name: "crescent", style: { height: "20px", width: "20px", marginLeft: "0.5rem" } }))), this.value && (this.showLink || this.showClear) && (index.h("ion-buttons", { style: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        gap: "1rem",
      } }, this.showLink && (index.h("ion-button", { class: "open-file", target: "_blank", href: this.value, size: "small", fill: "clear", expand: "full", color: "medium" }, "Open File", index.h("ion-icon", { name: "open", slot: "end" }))), this.showClear && (index.h("ion-button", { onClick: () => this.clear(), href: "#", class: "clear-file", size: "small", fill: "clear", expand: "full", color: "medium" }, "Clear", index.h("ion-icon", { name: "close-circle", slot: "end" })))))));
  }
};
UploadButton.style = uploadButtonCss;

exports.fireenjin_upload_button = UploadButton;
