document.body.onload=loadOwnedGames()

document.getElementById('owned_nav').classList.add('active')

async function loadOwnedGames() {

    const player_amount_input = document.getElementById("player_amount")

    var boardgame_datatable = new DataTable('.boardgame_table', {
        "pageLength":-1,
        "bLengthChange": false,
        ajax: {
            url: api_url + '/owned?filter_expansions_out=true',
            dataSrc: ''
        },
        columns: [
            { 
                data: 'thumbnail_url',
                render: function (data,type){
                    return '<img src="' + data + '" class="img-fluid" />'
                }
            },
            { 
                data: 'name'
            },
            { 
                data: 'min_players',
                render: function(data,type,row){
                    if (row.min_players != row.max_players){
                        return row.min_players + '-' + row.max_players
                    }else{
                        return row.min_players
                    }
                    
                }
            },
            { 
                data: 'min_playing_time',
                render: function(data,type,row){
                    if (row.min_playing_time != row.max_playing_time){
                        return row.min_playing_time + '-' + row.max_playing_time
                    }else{
                        return row.min_playing_time
                    }
                }
            },
            { 
                data: 'weight'
            }
        ],
        columnDefs: [
            {
                targets: 'no-sort', orderable: false 
            },
            {
                targets: '_all',
                orderSequence: [ 'asc', 'desc' ]
            }
        ],
        order: [[1, 'asc']]
    });

    // Custom range filtering function
    boardgame_datatable.search.fixed('range', function (searchStr, data, index) {
        var player_amount = parseInt(player_amount_input.value, 10);
        //var max = parseInt(maxEl.value, 10);
        //console.log(data)
        var min_players = parseFloat(data['min_players'])
        var max_players = parseFloat(data['max_players'])
        //console.log(min_players, max_players)
        console.log(player_amount)
        if ((player_amount >= min_players && player_amount <= max_players) || isNaN(player_amount)){
            return true;
        }
    
        return false;
    });

    player_amount_input.addEventListener('input', function () {
        boardgame_datatable.draw();
    });


    $('.boardgame_table').on('click', 'tbody tr', function() {
        var boardgame_id = boardgame_datatable.row(this).data().id;
        window.location.href = "/boardgame?id=" + boardgame_id
      })

}