// Selected = is clicked sport selected or not, BOOL
// Sports = all selected sports, ARRAY
$(".sport").on("selected", function(e, selected, sports) {
    console.log(selected, sports);
})

window.addEventListener('DOMContentLoaded', (event) => {
    window.sessionStorage.setItem('tweets', JSON.stringify([]));
});

$(".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
    }

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

$(window).on("resize", function(){
    showFeeds()
});

$(window).on("load", function() {
    showFeeds()
})

$(".sortby").on("click", function() {
    $(".sort-dropdown").toggle()
    // $(".sort-btn").toggleClass("radius-bottom")
}) 

$(".sort-dropdown-list li").on("click", function() {
    $(".sort-dropdown").toggle()
    filters.sorted = $(this).val()
    $(window).trigger("test", filters)
})

$(window).on("test", function(e, filter) {
    console.log(filter);
})

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

$(".logo").on("click", function() {
    if (root.style.getPropertyValue("--main-bg") === 'snow') {
        console.log("IM here")
		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');
    }
})

$(".order-btn").on("click", function() {
    if($(this).html() == "arrow_downward") {    // Descending to ascending
        $(this).html("arrow_upward")
    } else {    // Ascending to descending
        $(this).html("arrow_downward")
    }
})