var leagueID;
window.onload = async ()=>
{
    leagueID = location.href.split('/')[location.href.split('/').length-1]
    var league = await fetch(`${window.location.origin}/api/getLeague`, 
    {
        method: "GET",
        headers:{
            leagueid:leagueID
        }
    })
    .then(res=>{return res.json()})
    .then(response=>
        {
            if(response.Error) alert(response.Error)
            return response.data;
        })
    .catch(console.error)
    fillResults(league.Games);
    fillSchedule(league.Games);
    fillPlayers(league.Players)
}
function toggleTab (bt, oBt)
{
   bt.classList.contains('active')?bt.classList.remove('active'):bt.classList.add('active');
   oBt.classList.contains('active')?oBt.classList.remove('active'):oBt.classList.add('active');
   var results = document.getElementById('results');
   var schedule = document.getElementById('schedule');
   results.classList.contains('active')?results.classList.remove('active'):results.classList.add('active');
   schedule.classList.contains('active')?schedule.classList.remove('active'):schedule.classList.add('active');
}

async function fillResults(Games)
{
    //just so that I have 1 to work with
    // Games[0].Played = true;
    // Games[0].Winner  = 'hc12';
    // Games[0].PA.Winner = true;
    // Games[0].PA.Kills = 1;
    // Games[0].PA.CS = 50;
    // Games[0].PlayedTimeStamp = new Date(Date.now()).getDate()+'/' + (new Date(Date.now()).getMonth()+1);
    // Games[0].WinCondition = "FirstBlood";
    // Games = Games.filter(x=>x.Played)
    Games = Games.filter(x=>x.Played==true);
    if(Games.length==0) return;
    const filteredGames = Games.reduce((Game, obj) => 
    {
        const { PlayedTimeStamp, ...rest } = obj;
        Game[PlayedTimeStamp] = Game[PlayedTimeStamp] || [];
        Game[PlayedTimeStamp].push(rest);
        return Game;
    }, {});
    var matches =[];
    var days=[];
    for await(var day of Object.keys(filteredGames))
    {
        for await(var game of filteredGames[day])
        {
            console.log(game)
            matches.push(`
                <div class="match">
                
                <div class="matchPlayers">
                <p>
                    ${game.PA.Name} x ${game.PB.Name}
                </p>
                </div >
                <div class="matchResult">
                <span class="${game.PA.winner?'winner':''}">
                    1
                </span>
                <span class="${!game.PA.winner && !game.PB.winner?'winner':''}">
                    x
                </span>
                <span class="${game.PB.winner?'winner':''}">
                    1
                </span>
                </div>
            </div>
            `)
        }
        const Day = new Date(Number(day));
        days.push(`
        <div class= "day">
            <div id = "day"> 
                <p>Day:${day?(Day.getDate()+'/' + (Day.getMonth()+1)):Object.keys(filteredGames).length}</p>
            </div>
            <div class ="box">
                ${matches.join('\n')}
            </div>
        </div>     
    `)
    }
    document.getElementById('results').innerHTML = days,join('\n');
}
async function fillSchedule(Games)
{
    Games = Games.filter(x=>x.Played==false)
    var matches = [];
    for await(var game of Games)
    {
        matches.push(`
            <div class="match">
            <div class="matchPlayers">
            <p onclick="listener('${game.gId}')">
                ${game.PA.Name} x ${game.PB.Name}
            </p>
            </div >
        </div>
        `)
    }
    document.getElementById('schedule').innerHTML = matches.join('\n')
    
}
async function fillPlayers(Players)
{
    Players.sort(function(a, b) {
        return b.Points - a.Points;
    });
    var players = [];
    for await(var player of Players)
    {
        players.push(`
        <tr>
          <td>${player.Name}</td>
          <td>${player.Points}</td>
          <td>${player.PlayedPoints}</td>
          <td>${player.Kills}</td>
          <td>${player.Deaths}</td>
          <td>${player.CreepScore}</td>
        </tr>
        `)
    }
    document.getElementById('LeagueTable').innerHTML =
    `
    <tr>
        <th id="Player">Players</th>
        <th id="Points">P</th>
        <th id="PointsPlayed">PP</th>
        <th id="Kills">K</th>
        <th id="Deaths">D</th>
        <th id="CS">CS</th> 
    </tr>
    ${players.join('\n')}
    `

}

async function listener(id)
{
    window.open(`${window.location.origin}/leagueListener?id=${id}&leagueid=${leagueID}`)
}