$.getJSON("/games.json", function (data) {
    
    starredgames = getCookie("starred");
    if(starredgames == "") {
        starredgames = []
    } else {
        starredgames = JSON.parse(starredgames)

    }
    console.log(starredgames);
    $("#gamesearch").prop({placeholder: "Click here to search through our " + data.length + " games!"});
    data.sort(dynamicSort("name"));
    for (let i = 0; i < data.length; i++) {
        let $element = $('<div>').prop({
            class: 'game',
            style: 'cursor: pointer;',
            id: data[i].directory
        }).append(
            $('<img>').prop({
                src: data[i].directory + "/" + data[i].image,
                alt: data[i].name + " logo"
            })
        ).append(
            $('<h1>').text(data[i].name)
        ).append(
            $("<mat-icon>").prop({
                class: 'material-symbols-rounded'
            }).text("star")
        );
    
        if (starredgames.includes(data[i].directory)) {
            $element.find("mat-icon").attr("id", "starred");
            let $pinnedelement = $element.clone();
            $('#pinnedgames').append($pinnedelement);
            if($("#pinnedgames #message")) {
                $("#pinnedmessage").hide();
            }
           
        }
        
        $('#games').append($element);

    }
    $("#games #message").remove();
});

$(document).ready(function() {
    let starred;
    $(document).on("click", ".game", function(event) {
        if($(event.target).is('mat-icon')) {
            if(!$(event.target).attr("id")) {
                $(event.target).prop({id: "starred"})
                starred = Cookies.get("starred")
                if(starred) {
                    starred = JSON.parse(starred);
                } else {
                    starred = []
                }
                starred.push($(this).attr("id"));
                Cookies.set("starred", JSON.stringify(starred));
                $element = $(this).clone();
                $('#pinnedgames').append($element);
                $("#pinnedmessage").hide();
                temp = $('#pinnedgames')[0].childNodes;
                pinnedarray = [...temp]

                pinnedarray.sort(dynamicSort("id"));
                $("#pinnedgames").empty();
                for (let i = 0; i < pinnedarray.length; i++) {
                    pinnedarraynodes = pinnedarray[i].childNodes;
                    pinnedarraynodes = [...pinnedarraynodes]
                    let $element = $('<div>').prop({
                        class: 'game',
                        style: 'cursor: pointer;',
                        id: pinnedarray[i].id
                    }).append(
                        $('<img>').prop({
                            src: pinnedarraynodes[0].src,
                            alt: pinnedarraynodes[0].alt
                        })
                    ).append(
                        $('<h1>').text(pinnedarraynodes[1].innerHTML)
                    ).append(
                        $("<mat-icon>").prop({
                            class: 'material-symbols-rounded',
                            id: 'starred'
                        }).text("star")
                    );
                    $('#pinnedgames').append($element);
                }
                } else {
                    $(event.target).removeAttr("id");
                    $thisdiv = '#' + $(this).attr("id")
                    $thisdiv = $thisdiv.replace(".", "\\.");
                    starred = Cookies.get("starred")
                    starred = JSON.parse(starred);
                    ourindex = starred.indexOf($(this).attr("id"));
                    starred.splice(ourindex, 1);
                    Cookies.set("starred", JSON.stringify(starred));
                    $("#pinnedgames " + $thisdiv).remove();
                    if($('#pinnedgames').is(':empty')) {
                        $("#pinnedmessage").show();
                    }
                    $($thisdiv + " #starred").removeAttr("id");
                }
        } else {
            redirectGame($(this).attr("id"));
        }
    }); 
    $(document).on("click", "#game span", function(event) {
        $(this).prop({class: "material-symbols-outlined fill"})
    });    
});

function redirectGame(dir) {
    window.location.href = window.location.origin + "/" + dir + "/index.html";
}
function dynamicSort(property) {
    var sortOrder = 1;

    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }

    return function (a,b) {
        if(sortOrder == -1){
            return b[property].localeCompare(a[property]);
        }else{
            return a[property].localeCompare(b[property]);
        }        
    }
}