var socket = null;
var sendtext = function(){
    var text = $('#texte-msg').val();
    if (text.length > 1){
        $('#texte-msg').val('');
        socket.emit('text', {'text':text});
    }
};

var choixcouleur = function(coul){
    socket.emit('choose_color', {'atout':coul});
}

var jouer = function(carte, no){
    socket.emit('play', {'card':carte});
}
var restart_jeu = function(){
    socket.emit('restart', {});
}


$.fn.pressEnter = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

var set_points = function(){
    $('#nous-tot').html( jeu['cumul'][jeu['nr']%2]     );
    $('#nous-part').html(jeu['points'][jeu['nr']%2]    );
    $('#eux-tot').html(  jeu['cumul'][(jeu['nr']+1)%2] );
    $('#eux-part').html( jeu['points'][(jeu['nr']+1)%2]);
    $('#nopart').html('Partie '+jeu['partie']);
}

var set_atout = function(){
    if(jeu['atout'] == null || jeu['atout']==''){
        var coulprop = jeu['played'][0];
        $('#atout').html(`<img src="/static/cards/${coulprop}.png" width=100% />`);
        if (jeu['turn']<-4 && (jeu['turn']+jeu['first_player']+8)%4 == jeu['nr']){
            $('#prispar').html(`<input type="submit" onclick="javascript:choixcouleur('${coulprop[1]}')" value="Prendre" />`);
            $('#preneur').html(`<input type="submit" onclick="javascript:choixcouleur(null)" value="Passer" />`);
        }else if((jeu['turn']+jeu['first_player']+8)%4 == jeu['nr']){
            $('#prispar').html(`<input type="submit" onclick="javascript:choixcouleur('P')" value="Pique" />
                                <input type="submit" onclick="javascript:choixcouleur('C')" value="Coeur" />
                                <br />
                                <input type="submit" onclick="javascript:choixcouleur('T')" value="Trèfle" />
                                <input type="submit" onclick="javascript:choixcouleur('F')" value="Carreau" />
                `);
            $('#preneur').html(`<input type="submit" onclick="javascript:choixcouleur(null)" value="Passer" />`);
        }else{
            $('#prispar').html(`Pris par`);
            $('#preneur').html(`----`);
        }
    }else{
        $('#atout').html(`<img src="/static/cards/${jeu['atout']}.png" width=100% />`);
        $('#prispar').html(`Pris par`);
        $('#preneur').html(`${jeu['playersinfo'][jeu['preneur']]}`);
    }
}

jeu['monjeu'] = Array.from(jeu['cards']);
var order = ['A', '0', 'R', 'D', 'V', '9', '8', '7'];
var order_atout = ['V', '9', 'A', '0', 'R', 'D', '8', '7'];
var set_jeu = function(){
    var order_colors = ['P', 'C', 'T', 'F'];
    if (jeu['atout'] == 'C'){
        order_colors = ['C', 'T', 'F', 'P'];
    }else if (jeu['atout'] == 'T'){
        order_colors = ['T', 'C', 'P', 'F'];
    }else if (jeu['atout'] == 'F'){
        order_colors = ['F', 'T', 'C', 'P'];
    }
    jeu['monjeu'].sort(function(a,b){
      if (a[1]==jeu['atout']){
          x = order_atout.indexOf(a[0]);
      }else{
          x = order.indexOf(a[0]);
      }
      if (b[1]==jeu['atout']){
          y = order_atout.indexOf(b[0]);
      }else{
          y = order.indexOf(b[0]);
      }
      return x+15*order_colors.indexOf(a[1]) > y+15*order_colors.indexOf(b[1]) ? 1 : -1;
    });
    console.log(jeu['monjeu']);
    
    for(i=0;i<jeu['monjeu'].length;i++){
        if (jeu['monjeu'][i]==null){
            $('#carte-'+i).html('');
        }else{
            $('#carte-'+i).html(`<a href="javascript:jouer('${jeu['monjeu'][i]}', ${i})"><img src="/static/cards/${jeu['monjeu'][i]}.png" width=100% /></a>`);
        }
    }
}

var set_cartes = function(){
    first_player = jeu['first_player']
    if (jeu['turn']%4==0 && 'lastfirstplayer' in jeu){
        first_player = jeu['lastfirstplayer']
    }
    if (jeu['preneur'] == null){
        $('#jeu-1').html('');
        $('#jeu-2').html('');
        $('#jeu-3').html('');
        $('#jeu-4').html('');
    }else{
        for(i=first_player;i<first_player+4;i++){
            j = i-first_player
            k = i%4
            if (jeu['played'].length > j && jeu['played'][j]!= ''){
                $('#jeu-'+ k).html(`<img src="/static/cards/${jeu['played'][j]}.png" width=100% />`);
            }else{
                $('#jeu-'+ k).html('');
            }
        }
    }
}

var set_derpli = function(){
    if(jeu['last_played'].length >0){
        for(i=0;i<4;i++){
            $('#der-pli-'+i).html(`<img src="/static/cards/${jeu['last_played'][i]}.png" width=100% />`);
        }
    }
}

var set_players = function(){
    for(i=0;i<4;i++){
        $('#joueur-'+i).html(`${jeu['playersinfo'][jeu['players'][i]]}`);
    }
}

var set_current_player = function(){
    for(i=0;i<4;i++){
        $('#joueur-'+i).css('font-weight', 'normal');
    }
    i = (jeu['turn']+jeu['first_player']+8)%4;
    $('#joueur-'+i).css('font-weight', 'bold');
    if((jeu['turn']+jeu['first_player']+8)%4 == jeu['nr']){
        $('#a-vous').css('visibility', 'visible');
    }else{
        $('#a-vous').css('visibility', 'hidden');
    }

    if(jeu['turn']==32 && jeu['admin']==jeu['players'][jeu['nr']]){
        $('#suivant').show();
    }
}


$(document).ready(function() {
socket = io(window.location.pathname);
$('#suivant').hide()
set_points();
set_atout();
set_jeu();
set_cartes();
set_derpli();
set_players();
set_current_player();

for (e in jeu){
        $('#jeu').append(`${e} : ${jeu[e]} <br />`)
}
if((jeu['turn']+jeu['first_player'] + 8)%4 == jeu['nr']){
    $('#a-vous').css('visibility', 'visible');
}


socket.on('connect', function() {
    socket.emit('join', {data: 'I\'m connected!'});
});

socket.on('text', function(data) {
    textr = data['text'];
    name = data['name'];
    $('#chat').prepend(`<b>${name}</b> : ${textr}<br />`);
});

socket.on('restart', function(data) {
    for(d in data){
        jeu[d] = data[d]
    }
    set_points();
    set_atout();
    set_cartes();
    set_derpli();
    set_players();
    set_current_player();
    socket.emit('monjeu', {});
});

socket.on('choose_color', function(data){
    console.log(data)
    jeu['turn'] = data['turn']
    jeu['preneur'] = data['preneur']
    jeu['atout'] = data['atout']
    set_atout();
    set_current_player();
    if(jeu['turn']>=0){
        socket.emit('monjeu', {});
    }
});

socket.on('monjeu', function(data){
    jeu['cards'] = data['cards'];
    jeu['monjeu'] = Array.from(data['cards']);
    set_jeu();
});

socket.on('play', function(data){
    console.log(data)
    jeu['turn'] = data['turn'];
    jeu['lastfirstplayer'] = jeu['first_player']
    jeu['first_player'] = data['first_player'];
    jeu['last_played'] = data['last_played'];
    jeu['points'] = data['points'];
    if(data['played'] == null || data['played'].length == 0){
        jeu['played'] = data['last_played'];
        console.log(jeu['played'])
        set_cartes();
        set_derpli();
        set_points();
    }
    else{
        jeu['played'] = data['played'];
        console.log(jeu['played'])
        set_cartes();
        set_points();
    }
    var first_player = jeu['first_player'];
    if (jeu['turn']%4==0 && 'lastfirstplayer' in jeu){
        first_player = jeu['lastfirstplayer']
    }
    if((jeu['turn']+first_player+7)%4 == jeu['nr']){
        console.log("Je viens de jouer")
        i = jeu['monjeu'].indexOf(jeu['played'][jeu['played'].length-1]);
        if (jeu['played'].length>0 && i >=0){
            console.log(i)
            jeu['monjeu'][i] = null;
            $('#carte-'+i).html('')
        }

    }
    set_current_player();
});


$('#texte-msg').pressEnter(function(e){
    sendtext();
});



});