export default class Style{

    constructor(gameInstanz) {
        this._game = gameInstanz;

        $('#drawCard').on('click', ()=>{
            this.game.currentPlayerInstanz.drawCard(1);
            this.refreshDebug();
        });

        let firstDraw = $('#first-draw');

        firstDraw.on('mouseenter', ()=>{
            firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
            firstDraw.css('min-width', '27vh');
            firstDraw.css('top', '50vh');
        });
        firstDraw.on('mouseleave', ()=>{
            firstDraw.css('transition', 'min-width 1s, top 0.5s');
            firstDraw.css('top', '47vh');
            firstDraw.css('min-width', '20vh');
        });
        firstDraw.on('click', ()=>{

            this.game.currentPlayerInstanz.drawCard(1);
            this.refreshDebug();
            this.refreshHtml();

            firstDraw.css('transition', 'min-width 1s, top 0.5s');
            firstDraw.css('top', '47vh');
            firstDraw.css('min-width', '20vh');
        });
    }

    refreshHtml(){
        $('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
    }

    refreshDebug(){
        $('#drawCard').css('background-color', 'white');

        $("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
        $("#playerCards").html("Karten: ");
        for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++){
            $('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
            $('#playerCards').append('<button id="button' + i + '">+</button>  | ');
            $('#button' + i).on('click', () =>{
               this.game.currentPlayerInstanz.putCard(i);
               this.refreshDebug();
               this.refreshHtml();
            });
            if (this.game.currentPlayerInstanz.hand[i].canPut)
                $('#button' + i).css('background-color', 'green');
        }
        $('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
        $("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
        $("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);

        if(!this.game.currentPlayerInstanz.canPlay)
            $('#drawCard').css('background-color', 'red');
    }

    showDebug(){
        $('#debug').show();
        this.refreshDebug();
    }

    hideDebug(){
        $('#debug').hide();
    }

    get game(){
        return this._game;
    }

}