document.addEventListener("DOMContentLoaded", function() {
    console.log("filemure ready")
    const dropzone = document.querySelector('html');

    let progressDialog = document.querySelector('#upload_progress_dialog')
    let progressBar = document.querySelector('#upload_progress')

    // window.addEventListener

    // Prevent default behavior for drag-over and drop
    dropzone.addEventListener('dragover', (e) => {
        console.log("over")
        e.preventDefault();
        dropzone.classList.add('dragactive');
    });

    dropzone.addEventListener('dragleave', (e) => {
        console.log("out")
        dropzone.classList.remove('dragactive');
    });

    dropzone.addEventListener('drop', (e) => {
    console.log("drop")
      e.preventDefault();
      dropzone.classList.remove('dragactive');

      // Handle dropped files
      const files = e.dataTransfer.files;
      if (files.length > 0) {
        console.log('Files dropped:', files);

        // Process the files
        for (const file of files) {
            progressDialog.showModal();
            console.log('File name:', file.name);
            console.log('File size:', file.size, 'bytes');
            console.log('File type:', file.type);

            const formData = new FormData();
            formData.append('file', file);

            const xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", (event) => {
                if (event.lengthComputable) {
                    console.log("upload progress:", event.loaded / event.total);
                    progressBar.value = 100.0 * event.loaded / event.total;
                }
            });
            xhr.addEventListener("progress", (event) => {
                if (event.lengthComputable) {
                    console.log("download progress:", event.loaded / event.total);
                    progressBar.value = event.loaded / event.total;
                }
            });
            xhr.addEventListener("loadend", () => {
                console.log(xhr.readyState, xhr.status)
                progressDialog.close();
            });

            xhr.open('POST', '/upload', false);
            xhr.send(formData);

//          fetch('/upload', {
//            method: 'POST',
//            body: formData,
//          })
//            .then(response => response.json())
//            .then(data => console.log('Upload successful:', data))
//            .catch(error => console.error('Upload failed:', error));
        }
      }
    });
});