export default class Style {

    constructor(gameInstanz) {
        this._game = gameInstanz;

        this._cardOnDeck = null;

        this._firstDraw = $('#first-draw');

        this._firstPut = $('#first-put');

        this._firstPutAnim = $('#first-put-anim');

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

        this.firstDraw.on('mouseenter', () => {
            this.drawCardAnim(true, false);
        });
        this.firstDraw.on('mouseleave', () => {
            this.drawCardAnim(false, false);
        });
        this.firstDraw.on('click', () => {

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

            this.drawCardAnim(false, true);

        });
    }

    refreshHtml() {
        if (this._cardOnDeck !== this.game.cardOnDeck) {
            console.log(" ewfw")
            this.putCardAnim();
            this._cardOnDeck = this.game.cardOnDeck;
        } else {
            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
            this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
        }


        this.refreshDebug();
    }

    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.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');
    }

    putCardAnim() {
        this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');

        this.firstPutAnim.css('transition', 'top 0.5s, opacity 0.3s');
        this.firstPutAnim.css('top', '47vh');
        this.firstPutAnim.css('opacity', '1');

        setTimeout(() => {
            this.firstPutAnim.css('transition', '');
            this.firstPutAnim.css('top', '30vh');
            this.firstPutAnim.css('opacity', '0');
            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
            this.firstPut.css('opacity', '1');
        }, 500);


    }

    drawCardAnim(enable, playerDraw) {

        if (playerDraw) {

            this.firstDraw.css('transition', 'min-width 0.5s, top 0.5s, opacity 0.5s');
            this.firstDraw.css('min-width', '35vh');
            this.firstDraw.css('top', '60vh');
            this.firstDraw.css('opacity', 0);

            setTimeout(()=>{
                this.firstDraw.css('transition', '');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');
                this.firstDraw.css('opacity', '1');
            }, 500);

        } else {
            if (enable) {
                this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s');
                this.firstDraw.css('min-width', '27vh');
                this.firstDraw.css('top', '50vh');

                setTimeout(() => {
                    this.firstDraw.css('transition', '')
                }, 500);
            } else {
                this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');

                setTimeout(() => {
                    this.firstDraw.css('transition', '')
                }, 1000);
            }
        }

    }

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

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

    get game() {
        return this._game;
    }

    get firstDraw() {
        return this._firstDraw;
    }

    get firstPut() {
        return this._firstPut;
    }

    get firstPutAnim() {
        return this._firstPutAnim;
    }

}