// Written by retoor@molodetz.nl

// This class defines a custom HTML element for an upload button with integrated file upload functionality using XMLHttpRequest.

// MIT License: Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

class UploadButtonElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
  chatInput = null;
  async uploadFiles() {
    const fileInput = this.container.querySelector(".file-input");
    const uploadButton = this.container.querySelector(".upload-button");

    if (!fileInput.files.length) {
      return;
    }

    const files = fileInput.files;
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append("files[]", files[i]);
    }
    const request = new XMLHttpRequest();

    request.responseType = "json";
    request.open("POST", `/channel/${this.channelUid}/attachment.bin`, true);

    request.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        uploadButton.innerText = `${Math.round(percentComplete)}%`;
      }
    };
    const me = this;
    request.onload = function () {
      if (request.status === 200) {
        me.dispatchEvent(
          new CustomEvent("uploaded", { detail: request.response }),
        );
        uploadButton.innerHTML = "📤";
      } else {
        alert("Upload failed");
      }
    };

    request.onerror = function () {
      alert("Error while uploading.");
    };

    request.send(formData);
    const uploadEvent = new Event("upload", {});
    this.dispatchEvent(uploadEvent);
  }
  channelUid = null;
  connectedCallback() {
    this.styleElement = document.createElement("style");
    this.styleElement.innerHTML = `
            body {
                font-family: Arial, sans-serif;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #000000;
            }
            .upload-container {
                position: relative;
            }
            .upload-button {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                background-color: #000000;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                position: relative;
                overflow: hidden;
            }
            .upload-button i {
                margin-right: 8px;
            }
            .progress {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                background: #f05a28;;
                width: 0%;
            }
            .hidden-input {
                display: none;
            }
        `;
    this.shadowRoot.appendChild(this.styleElement);
    this.container = document.createElement("div");
    this.container.innerHTML = `
            <div class="upload-container">
                <button class="upload-button">
                   📤
                </button>
                <input class="hidden-input file-input" type="file" multiple />
            </div>
        `;
    this.shadowRoot.appendChild(this.container);
    this.channelUid = this.getAttribute("channel");
    this.uploadButton = this.container.querySelector(".upload-button");
    this.fileInput = this.container.querySelector(".hidden-input");
    this.uploadButton.addEventListener("click", () => {
      this.fileInput.click();
    });
    this.fileInput.addEventListener("change", () => {
      this.uploadFiles();
    });
  }
}

customElements.define("upload-button", UploadButtonElement);
