//Add function to close button on overlay
document.getElementById("close").addEventListener("click", function(e){
    document.getElementById("overlay").style.display = "none";
    overlayOpen = false;
});

//Make clicking outside of overlay also close the overlay
var overlayOpen = false;
document.addEventListener("click", (event) => {
    if(!document.getElementById("overlay").contains(event.target) && overlayOpen){
        document.getElementById("overlay").style.display = "none";
        overlayOpen = false;
    }
});

//preload images
function preload_images(src_list, callback){
    console.log("preloading")
    let loaded = 0;
    src_list.forEach(function(src) {
        img = new Image();
        img.onload = function() {
            if (++loaded == src_list.length && callback) {
                callback();
            }
        };
        img.onerror = function(err) {
            console.log("ERROR Preloading:", src)
            console.log(err);
        };
        img.src = src;
    });
};

//Check if string is a valid URL
const isValidUrl = urlString=> {
    try { 
        return Boolean(new URL(urlString)); 
    }
    catch(e){ 
        return false; 
    }
}
  
// Image Category Icons
const getCategoryIcon = (categoryCl) => {
    const categoryIcons = [
        {
            "catID": "AroundtheOffice",
            "icon": "building"
        },
        {
            "catID": "Haas",
            "icon": "landmark"
        },
        {
            "catID": "InternationalDailyLife",
            "icon": "globe"
        },
        {
            "catID": "OfficeTeamMeetings",
            "icon": "people-group"
        },
        {
            "catID": "Relationships",
            "icon": "handshake"
        },
        {
            "catID": "IllustrationsGraphics",
            "icon": "palette"
        }
    ];
    
    const cat = categoryIcons.find(cat => cat.catID === categoryCl);
    let { icon } = cat;

    return icon;
};

//Spreadsheet Data
const spreadsheetId = '1FnqMmESn65AEc6bqTNM-OePpJLhQWdcJh1PLgVRL-MU'
const parser = new PublicGoogleSheetsParser(spreadsheetId)
parser.parse().then((items) => {
    //console.log(items)
    var folders = Object.keys(items[0]);    //Folder Names
    var allURLs = folders.pop();            //Get list of all urls

    //Sort folders alphabetically (putting Illustrations/Graphics at the end)
    folders.sort();
    var graphicsIndex = folders.indexOf("Illustrations/Graphics");
    if(graphicsIndex!=-1){
        folders.push(folders.splice(graphicsIndex, 1)[0]);
    }
    
    //Preloading images
    allURLs = allURLs.split(';;');
    
    let starttime = Date.now();
    preload_images(allURLs, () => {
    console.log("All images preloaded in", Date.now() - starttime, 'ms');
    });

    //Formatting Files into Array and Creating Header Images
    var allImg = {};
    var headerImg = {};
    var headerHTML = [];
    let navHTML = [];
    for(var i=0; i<folders.length; i++){
        allImg[folders[i]]=[];
    }
    // TODO: load these header category photos first
    for(var i=0; i<items.length; i++){
        for(var j=0; j<folders.length; j++){
            if(items[i][folders[j]]){
                allImg[folders[j]].push(items[i][folders[j]]);
                if(items[i][folders[j]].split(';;')[3].split('/')[0] == "image"){
                    if(!Object.keys(headerImg).includes(folders[j])){
                        let categoryCl = folders[j].replace(/\//g, "").replace(/ /g, "");
                        let categoryIcon = getCategoryIcon(categoryCl);
                        headerImg[folders[j]] = "https://lh3.googleusercontent.com/d/" + items[i][folders[j]].split(';;')[1] + "?sz=200";
                        headerHTML.push(`
                            <div class="headerBlock ${categoryCl}">
                                <img src=${headerImg[folders[j]]} class="headerImage">
                                <h4 class="heading-4 text-color-white">${folders[j]}</h4>
                            </div>
                        `)
                        navHTML.push(`
                            <li class="navItem">
                                <a href="#${categoryCl}">
                                    <i class="fa-solid fa-${categoryIcon}"></i>&nbsp;${folders[j]}
                                </a>
                            </li>
                        `)
                    }
                }
            }
        }
    }
    
    // TODO: Make sure to load and render these images first
    document.getElementById("headerCategories").innerHTML = headerHTML.join('');
    var headerBlocks = document.getElementsByClassName("headerBlock");
    for(var i=0; i<headerBlocks.length; i++){
        headerBlocks[i].addEventListener("click", function(e){
            document.getElementById(this.classList[1]).scrollIntoView({behavior: "smooth"});
        });
    }

    document.getElementById("navLinks").innerHTML = navHTML.join('');

    // Scroll to top button
    const backToTopButton = document.getElementById("back-to-top");
    backToTopButton.addEventListener("click", () => {
        window.scrollTo(0, 0);
    });

    // Toggle mobile nav open/close
    const navButton = document.getElementById("toggle-mobile-nav");
    const navLinks = document.getElementById("navLinks");
    navButton.addEventListener("click", () => {
        if (!navLinks.classList.contains('open')) {
            navLinks.classList.add('open');
        } else {
            navLinks.classList.remove('open');
        }
    });

    // Only show nav and "back to top" button below the fold
    let browserWidth = window.innerWidth;
    const el = document.querySelector("nav");
    let elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
    // TODO: refactor, only add event listener if browser width is 1200
    window.addEventListener('scroll', () => {
        console.log("browserWidth ", browserWidth);
        if (browserWidth > 1200) {
            if (document.documentElement.scrollTop > elTop){
                el.style.position = 'fixed';
                backToTopButton.style.position = 'fixed';
            } else {
                el.style.position = 'absolute';
                backToTopButton.style.position = 'absolute';
            }
        }
    });


    //Put images and info on page
    var foldersHTML = [];
    var attributions = {};
    for(var i=0; i<folders.length; i++){
        var images = allImg[folders[i]];
        var imgHTML = [];
        var docHTML = [];
        for(var j=0; j<images.length; j++){
            var img = images[j].split(";;");
            var imgName = img[0];
            var imgID = img[1];
            var imgDesc = img[2];
            var imgType = img[3].split('/')[0].replace(/;/g, '');
            var imgDownloadLink = img[4];
            var docText = img[5].split(/\n/);

            imgDesc = imgDesc.split(';');
            var imgAlt = imgDesc[0];
            if(imgDesc.length>1){
                if(imgDesc[1]==" " || imgDesc[1].toLowerCase()=="n/a"){
                    attributions[imgDownloadLink] = "";
                }else{
                    attributions[imgDownloadLink] = imgDesc[1];
                }
            }else{
                attributions[imgDownloadLink] = "";
            }

            if(imgType == "image"){
                imgHTML.push(`<img src="https://lh3.googleusercontent.com/d/${imgID}?sz=200" loading="lazy" class="collection-image" alt="${imgAlt}" id=${imgDownloadLink}></img>`);
            }else if(docText != ""){
                for(var k=0; k<docText.length; k++){
                    if(isValidUrl(docText[k])){
                        var linkName = docText[k].split('www.')[1].split('.')[0];
                        docHTML.push(`<a href="${docText[k]}" target="_blank" rel="noopener noreferrer" class="docLink">${linkName}</a></br>`);
                    }
                }
            }
            
        }
        
        document.getElementById("photos").innerHTML += `
            <div class="folderBlock" id="${folders[i].replace(/\s/g, '')}">
                <h3 class="heading-3">${folders[i]}</h3>
                ${docHTML.join('')}
                <div class="folderImgs">
                    ${imgHTML.join('')}
                </div>
            </div>`;
    }
    
    var imgs = document.getElementsByClassName("image");
    for(var i=0; i<imgs.length; i++){
        imgs[i].addEventListener("click", function(e){
            document.getElementById("enlarged_img").innerHTML = `<img src="${this.src}" class="enlarged_image" alt="${this.alt}"></img>`;
            document.getElementById("attribution").innerHTML = `${attributions[this.id]}`;
            document.getElementById("download_link").innerHTML = `<a href="${this.src}" download="${this.id}" target="_blank" class="download-btn">Download</a>`;
            document.getElementById("overlay").style.display = "block";
            setTimeout(function() {
                overlayOpen = true;
            }, 1000);
        });
    }
});