// This file is part of photo21
// Copyright (C) 2022  Amicale des élèves de l'ENS Paris-Saclay
// SPDX-License-Identifier: GPL-3.0-or-later

// When user drags files, register them in the file field
const dropZone = document.getElementById('drop_zone');
const uploadInput = document.getElementById('id_file_field');
const form = document.getElementById('upload_form')

dropZone.ondrop = function (e) {
    e.preventDefault();
    this.className = 'upload-drop-zone';
    console.log(e.dataTransfer.files)
    uploadInput.files = e.dataTransfer.files;
}

dropZone.ondragover = function () {
    this.className = 'upload-drop-zone drop';
    return false;
}

dropZone.ondragleave = function () {
    this.className = 'upload-drop-zone';
    return false;
}

// When user selects an existing gallery, disable new gallery fields
const gallerySelect = document.getElementById('id_gallery')
gallerySelectUpdate = () => {
    const useGallery = (gallerySelect.value !== "");
    document.getElementById('id_new_gallery_title').disabled = useGallery;
    document.getElementById('id_new_gallery_date_start').disabled = useGallery;
    document.getElementById('id_new_gallery_date_end').disabled = useGallery;
    document.getElementById('id_new_gallery_tags').disabled = useGallery;
    document.getElementById('id_new_gallery_description').disabled = useGallery;
}
gallerySelect.addEventListener('change', gallerySelectUpdate);
gallerySelectUpdate();

// On submit, show a message to make user wait
document.getElementById('upload_form').addEventListener('submit', (e) => {
    document.getElementById('submit-id-submit').disabled = true;
    document.getElementById('submit-id-submit').value = "Please be patient";
});

submitbtn = document.getElementById('submit-id-submit');
//submitbtn.type = "button";

//submitbtn.addEventListener("click", uplaodfnc);

var ctnbtn = document.createElement("input");
ctnbtn.classList = submitbtn.classList;
ctnbtn.value=gettext("Continious Upload");
ctnbtn.type = "button";

var pause = false ;

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


async function pausing() {
    pause = ! pause ;
    if (pause) {
        ctnbtn.value = gettext("Pausing upload");
    } else {
        ctnbtn.value = gettext("Resume");
    }
    
    
}

async function uplaodfnc() {

    ctnbtn.removeEventListener("click",uplaodfnc)
    ctnbtn.addEventListener("click",pausing)

    console.log(uploadInput.files);
    files = uploadInput.files;
    submitbtn.disabled = true;
    //ctnbtn.disabled = true;
    actual = 0;
    ctnbtn.value = gettext("Pause the upload, be patient")+" 0% (" + actual + "/" + files.length + ")";

    csrfvalue = document.getElementsByName("csrfmiddlewaretoken")[0].value;

    gallery_ID = gallerySelect.value;

    if (gallery_ID == "") {
        // Create gallery
    }

    total = files.length;

    fdata = new FormData(uploadInput.form);
    fdata.delete("file_field");
    //fdata.append("reptype", "json");


    response = await fetch("/upload/", {
        method: "POST",
        body: fdata,
        headers: {
            'Accept': 'application/json'
        }
    });
    returned = await response.json();

    if (returned.code != 200) {
        window.alert("There is an error in the form" + returned.error);
    }

    // Upload files
    for (let file of files) {
        while (pause){
            await sleep(100);
            ctnbtn.value = gettext("Upload Paused") + " " + Math.round(100 * actual / total) + "% (" + actual + "/" + files.length + ")";
        }
        actual++;
        sendform = new FormData();
        sendform.append("csrfmiddlewaretoken", csrfvalue);
        sendform.append("file_field", file);
        //sendform.append("reptype", "json");
        sendform.append("gallery", returned.galleryID);

        try {
            const response = await fetch("/upload/", {
                method: "POST",
                body: sendform,
                headers: {
            'Accept': 'application/json'
        }
            });
            okpass = await response.ok;
            if (!okpass) {
                window.alert("Error with " + file.name + "code" + await response.code);
            }
            if (!pause) {
                ctnbtn.value = gettext("Pause the upload, be patient")+" " + Math.round(100 * actual / total) + "% (" + actual + "/" + files.length + ")";
            }
            

        } catch (e) {
            console.error(e);
        }

    }

    fdata = new FormData(uploadInput.form);
    fdata.delete("file_field");
    fdata.delete("new_gallery_title");
    fdata.delete("new_galleru_date_start");
    fdata.delete("new_galleru_date_end");
    //fdata.append("reptype", "json");
    fdata.append("gallery", returned.galleryID);
    fdata.append("end", "end")

    response = await fetch("/upload/", {
        method: "POST",
        body: fdata,
        headers: {
            'Accept': 'application/json'
        }
    });
    returned = await response.json();


    ctnbtn.disabled = true;
    ctnbtn.value = gettext("Upload Complete Please reload the page");
}


ctnbtn.addEventListener("click", uplaodfnc);

form.appendChild(ctnbtn);