// declare elements
const adUpload = document.getElementById("ad-upload");
const ads = document.getElementById('ads');

const useExampleButton = document.getElementById("use-example");

var loadFile = document.getElementById("load-file");
var fileName = document.getElementById("file-name");
var fileSize = document.getElementById("file-size");
var progressBar = document.getElementById("progress-bar");
var progressText = document.getElementById("progress-text");
var timelinePreview = document.getElementById("preview");

var modal = document.getElementById("modal");
var dialog = document.getElementById("results");

var output = document.getElementById("output");

const wpContent = document.getElementsByClassName("results-content");
console.log(wpContent);


function loading(load){
    if (load){
        adUpload.classList.add('loading');
    } else {
        adUpload.classList.remove('loading');
    }
}

function progress(totalTimeMS){
// interval at moments based on total time.
    // 25%
    setTimeout(()=>{
        changeProgress(25);
    },totalTimeMS*0.25)
    // 50%
    setTimeout(()=>{
        changeProgress(50);
    },totalTimeMS*0.5)
    // 75%
    setTimeout(()=>{
        changeProgress(75);
    },totalTimeMS*0.75)
    // 80%
    setTimeout(()=>{
        changeProgress(80, "Processing...");
    },totalTimeMS*0.8);
    // last step is completed processing and should only be done one the frames have been rendered.
    
    setTimeout(()=>{
        changeProgress(100, "Completed processing...");
        loadFile.classList.add("complete");
        progressBar.style.backgroundColor="#007041";
    },totalTimeMS);
    // Also change styling of the banner here
}

function changeProgress(percent, text){
    progressBar.style.width = percent+"%";
    if (text) {
        progressText.innerText = text;
    }
}

function cycleAds(totalTimeMS){
    // want to take in the total time and divide by the number of ads
    let adsArray = ads.getElementsByClassName("ad");
    let numOfAds = adsArray.length;

    for (let i = 1; i < numOfAds; i++){
        setTimeout(()=>{
            adsArray[i].style.display="flex";
            adsArray[i-1].style.display="none";
        }, (totalTimeMS/numOfAds)*i);
    }
}

function startLoad(loadTimeMS){
    // change load class/ load content
    loading(true);
    // start progress and ad display
    progress(loadTimeMS);
    cycleAds(loadTimeMS);
    // after short delay show modal
    setTimeout(()=>{
        modal.style.display="flex";
        // need to fade in results and hide ad upload
        adUpload.style.display="none";
        output.classList.remove("hide");
        // remove hide class from WP elements
        const wpContent = document.getElementsByClassName("results-content");
        console.log(wpContent);
        const contentLength = wpContent.length;

        console.log("length "+wpContent.length);
        console.log(wpContent);
        while(wpContent.length !=0){
            wpContent[0].classList.remove("results-content");
        }
        timelinePreview.style.height="auto";
    },loadTimeMS+2000);
}