// Selected = is clicked sport selected or not, BOOL
// Sports = all selected sports, ARRAY
$(".sport").on("selected", function(e, selected, sports) {
    filters.sports = sports;
    $(window).trigger("filter");
    showFeeds()
})

window.addEventListener('DOMContentLoaded', (event) => {
    window.sessionStorage.setItem('tweets', JSON.stringify([]));
    // run code every 5 seconds
    setInterval(function() {
        $(window).trigger("filter");
    }, 1000);
});

$(".sport").on("click", function() {
    $(this).toggleClass("selected")

    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name

    
    let index = selectedSports.indexOf(sportName)
    if (index > -1 ) {  // If element is found in array
        selectedSports.splice(index, 1) // Remove sport at index
    } else {
        selectedSports.push(sportName)  // Add sport to array
    }

    showFeeds()
    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
})

//evaluate and alter our page layout when page gets resized
$(window).on("resize", function(){
    showFeeds()
});

//evaluate and alter our page layout when page gets loaded
$(window).on("load", function() {
    showFeeds()
})

let root = document.querySelector(":root")

//switch between light and dark mode
$(".logo").on("click", function() {
    if (root.style.getPropertyValue("--main-bg") === 'snow') {
		var audio = new Audio("../media/Chicken.mp3");
		audio.play();
        root.style.setProperty('--main-medium-dark', '#1E1E1E');
        root.style.setProperty('--main-bg', '#292929');
        root.style.setProperty('--main-light', ' #ffffff' );
        root.style.setProperty('--main-dark', '#ffffff');
        root.style.setProperty('--tweet-color', '#000000')
        root.style.setProperty('--column-color', '#1E1E1E')
    } else {
		var audio = new Audio("../media/Rooster.mp3");
		audio.play();
        root.style.setProperty('--main-medium-dark', '#1D9BF0');
        root.style.setProperty('--main-bg', 'snow');
        root.style.setProperty('--main-light', '#000000');
        root.style.setProperty('--main-dark', ' #000000');
        root.style.setProperty('--tweet-color', 'whitesmoke');
        root.style.setProperty('--column-color', 'rgba(112, 128, 144, 0.388');
    }
})

//when a filter event happens, filter and sort tweets, then remove all old HTML and fill with new HTML
$(window).on("filter", function() {
    var parent = document.querySelector("#filtered")
    var lastTweet = parent.firstChild

    tweets = window.sessionStorage.getItem('tweets');
    tweets = JSON.parse(tweets);
    tweets = filterTweets(tweets, filters.blockedWords, filters.searchedWords.concat(filters.sports), filters.sorted, filters.order);
    tweets = sortTweets(tweets, {"sortby":filters.sorted, "order":filters.order});
    var displayTweets = tweets.reverse().slice(0, 100).reverse();
    if(displayTweets.length == 0) {
        parent.replaceChildren();
        return
    }
    if(!paused) {
        if(tweetCell(displayTweets[0]) != lastTweet){
            parent.replaceChildren();
            for (i = 0; i < Math.min(100, displayTweets.length); i++){
                tweet = displayTweets[i];
                parent.prepend(tweetCell(tweet));
            }
        }
    }
})

// toggle html for the sorting dropdown menu
$(".current-sort").on("click", function() {
    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
}) 

$(".sort-btn").on("click", function() {
    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
}) 

$(".sort-dropdown-list li:not(:first-of-type)").on("click", function() {
    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
    $(".current-sort").html($(this).html())
})

// toggle ordering between ascending or descending and changing arrow to match
$(".order-btn").on("click", function() {
    if($(this).html() == "arrow_downward") {    // Descending to ascending
        $(this).html("arrow_upward")
        filters.order = 'asc'
    } else {    // Ascending to descending
        $(this).html("arrow_downward")
        filters.order = 'desc'
    }
    $(window).trigger("filter")
    showFeeds()
})

//functions that get called in HTML onchange attributes to trigger filters
function updateSearched(searched){
    searched = searched.split(",");
    filters.searchedWords = searched;
    $(window).trigger("filter");
    showFeeds()
}

function updateBlocked(blocked){
    blocked = blocked.split(",");
    filters.blockedWords = blocked;
    $(window).trigger("filter");
    showFeeds()
}

function updateSort(sort){
    sortarray = []
    filters.sorted = sort;
    $(window).trigger("filter");
    showFeeds()
}

// toggle between paused and unpaused
$(".pause-btn").on("click", function() {
    if($(".pause-btn").html() == "pause") { // Unpaused to paused
        $(".pause-btn").html("play_arrow")
        paused = true;
    } else { // Paused to unpaused
        $(".pause-btn").html("pause")
        paused = false;
    }
})