//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])) {
                        var img = items[i][folders[j]].split(";;");
                        var imgDesc = img[2].split(';');
                        var imgAlt = imgDesc[0] || `${folders[j]} collection preview`;

                        let categoryCl = folders[j].replace(/\//g, "").replace(/ /g, "");
                        let categoryIcon = getCategoryIcon(categoryCl);
                        headerImg[folders[j]] = "https://lh3.googleusercontent.com/d/" + img[1] + "?sz=200";
                        headerHTML.push(`
                        <div class="headerBlock ${categoryCl}">
                            <img src="${headerImg[folders[j]]}" class="headerImage" alt="${imgAlt}">
                            <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}" aria-hidden="true"></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("collection-image");  // "image" → "collection-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}">`;
            document.getElementById("attribution").innerHTML = `${attributions[this.id]}`;
            document.getElementById("download_link").innerHTML = `<a href="${this.src}" download="${this.id}" target="_blank" class="download-btn" aria-label="Download ${this.alt}">Download</a>`;
            document.getElementById("overlay").style.display = "block";
            setTimeout(function () {
                overlayOpen = true;
            }, 1000);
        });
    }
});