/**
 * Global variables
 */
var requestedMonth;

/**
 * Checks the scroll status of an element on a scroll
 * event and adds box shadows either top, bottom or both
 * depening on the position of the scroll viewport
 * 
 * @param {Event} e Scroll event object
 */
function onscrollTestScrollShadow(e) {
    let shadowTarget = e.target.parentElement.children[1];

    if (e.target.clientHeight == e.target.scrollHeight) {
        // Target has no overflowing content and is not scrollable
        shadowTarget.classList.remove("box-shadow-top");
        shadowTarget.classList.remove("box-shadow-bottom");
        shadowTarget.classList.remove("box-shadow-topbottom");
        return;
    }
    
    if (e.target.scrollTop == e.target.scrollHeight - e.target.clientHeight) {
        // Scroll is at bottom
        shadowTarget.classList.add("box-shadow-top");
        shadowTarget.classList.remove("box-shadow-bottom");
        shadowTarget.classList.remove("box-shadow-topbottom");
    } else if (e.target.scrollTop == 0) {
        // Scroll is at top
        shadowTarget.classList.remove("box-shadow-top");
        shadowTarget.classList.add("box-shadow-bottom");
        shadowTarget.classList.remove("box-shadow-topbottom");
    } else {
        // Scroll is in middle somewhere
        shadowTarget.classList.remove("box-shadow-top");
        shadowTarget.classList.remove("box-shadow-bottom");
        shadowTarget.classList.add("box-shadow-topbottom");
    }
}

/**
 * Prepares an element with class day-events for scrolling, resetting
 * the scroll position to top, initializing the onscrollTestScrollShadow
 * function and adding the same function as scroll event handler
 * 
 * @param {Element} parent Parent element with class calendar-element
 */
function setupScroll (parent) {
    if (! parent.classList.contains("calendar-entry")) return;
    if (parent.children.length <= 1) return;
    if (parent.children[1].childElementCount == 0) return;

    let target = parent.children[1].children[0];
    if (! target.classList.contains("day-events")) return;
    
    target.scrollTop = 0;
    onscrollTestScrollShadow ( {target: target} );
    target.addEventListener("scroll", onscrollTestScrollShadow);
}

/**
 * Populates the month forward and backward buttons with proper links
 * and displays the correct month name in the top left corner
 */
function setupMonthDisplayAndButtons () {
    fetchRequestedMonth();

    let monthNameElement = document.getElementById("monthName");
    let monthFwdElement = document.getElementById("monthFwd");
    let monthBckElement = document.getElementById("monthBck");
    let urlSearchParams = new URLSearchParams(window.location.search);

    monthNameElement.innerText = getMonthName(requestedMonth);
    
    if (requestedMonth + 1 > 12) {
        monthFwdElement.href = "#";
    } else {
        urlSearchParams.set("month", requestedMonth + 1);
        monthFwdElement.href = "?" + urlSearchParams.toString();
    }

    if (requestedMonth - 1 < 1) {
        monthBckElement.href = "#";
    } else {
        urlSearchParams.set("month", requestedMonth - 1);
        monthBckElement.href = "?" + urlSearchParams.toString();
    }
    
}


// Add shadow indicators to calendar event lists when scrolling is available
window.addEventListener("DOMContentLoaded", () => {
    let calendarElement = document.getElementsByClassName("calendar-body")[0];
    Array.from(calendarElement.children).forEach( setupScroll );

    //setupMonthDisplayAndButtons();
    fetchRequestedMonth();
});