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

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

    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragactive');
    });

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

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

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

            for (const file of files) {
                // show progress dialog
                // warning: this way the progress dialog is shown for each file individually
                progressDialog.showModal();
                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("load", (event) => {
                    console.log(xhr.readyState, xhr.status)
                    progressDialog.close();
                    let res = JSON.parse(xhr.response);
                    window.location = res.redirect;
                });

                xhr.addEventListener("error", event => {
                    progressDialog.close();
                    alert("An error occurred.")
                });
                xhr.addEventListener("abort", event => {
                    progressDialog.close();
                    alert("Upload has been cancelled.")
                });

                xhr.open('POST', '/upload?target=document', false);
                xhr.send(formData);
            }
        }
    });
});