let app = new Vue({
    el: '#root',
    data: {
        initiated: false,
        roundActive: false,
        cardBack: 'img/cardBack_red5.png',
        cards: [],
        cardDeck: [],
        usersHand: [],
        dealersHand: [],
        lastCard: null,
        handScore: 0,
        dealerScore: 0,
        status: '',
        bet: 0,

        bankIsActive: false,
        bank: 0,
        money: 5000,
        toBank: 0,
        toMoney: 0,
        username: null,
        avatar: null,
    },
    methods: {
        generateDeck() {
            const names = ['spades', 'clubs', 'diamonds', 'hearts'];
            const highCards = ['j', 'q', 'k'];

            let cardDeck = [];

            names.forEach((symbolName) => {
                for (let cardPoints = 1; cardPoints <= 10; cardPoints++) {
                    let cardSymbol = cardPoints;
                    let points = cardPoints;
                    let isAnAce = false;

                    if (cardPoints === 1) {
                        points = 11;
                        cardSymbol = 'a';
                        isAnAce = true;
                    }

                    cardDeck.push({
                        ace: isAnAce,
                        points: points,
                        symbol: cardSymbol,
                        asset: 'img/' + symbolName + cardSymbol + '.png'
                    });
                }

                highCards.forEach((highCard) => {
                    cardDeck.push({
                        ace: false,
                        points: 10,
                        symbol: symbolName,
                        asset: 'img/' + symbolName + highCard + '.png'
                    })
                });
            });

            return cardDeck;
        },

        shuffleDeck() {
            let shuffledDeck = this.cards;
            let cardCount = shuffledDeck.length, t, i;

            while (cardCount) {
                i = Math.floor(Math.random() * cardCount--);
                t = shuffledDeck[cardCount];
                shuffledDeck[cardCount] = shuffledDeck[i];
                shuffledDeck[i] = t;
            }

            this.cards = shuffledDeck;
        },

        drawCardToUser() {
            let vue = this;

            let drawnCard = vue.cards.shift();
            vue.usersHand.push(drawnCard);

            if (drawnCard.ace && vue.handScore > 10) {
                drawnCard.points = 1;
            }

            if ((vue.handScore + drawnCard.points) > 21) {
                let aceCount = this.handIncludesAces(this.usersHand);
                console.log(aceCount + ' aces should be decreased in value');
            }

            vue.handScore += drawnCard.points;
        },

        drawCardToDealer() {
            let vue = this;

            let drawnCard = vue.cards.shift();
            vue.dealersHand.push(drawnCard);

            if (drawnCard.ace && vue.dealerScore > 10) {
                drawnCard.points = 1;
            }

            if ((vue.dealerScore + drawnCard.points) > 21) {
                let aceCount = this.handIncludesAces(this.dealersHand);
                console.log(aceCount + ' aces should be decreased in value');
            }

            vue.dealerScore += drawnCard.points;
        },

        handIncludesAces(hand) {
            let aceCount = 0;

            hand.forEach((card) => {
                if (card.ace === true) {
                    aceCount++;
                }
            });

            return aceCount;
        },

        handHasBlackJack(score) {
            return score === 21;
        },

        isPlus(score) {
            return score > 21;
        },

        startRound() {
            if (this.bet > this.money) {
                alertify.notify('Not enough money for bet.');
                return false;
            }

            this.money -= this.bet;

            this.initiated = true;
            this.endRound();

            this.roundActive = true;

            this.drawCardToUser();
            this.drawCardToDealer();
            this.drawCardToUser();
            this.drawCardToDealer();

            if (this.handHasBlackJack(this.dealerScore)) {
                this.dealerWon();
            }

            if (this.handScore === 21) {
                this.pass();
            }
        },

        drawAnotherCard() {
            this.drawCardToUser();

            if (this.isPlus(this.handScore)) {
                alertify.notify('Hand is plus, you lose.')
                this.roundActive = false;
            }
        },

        pass() {
            if (this.dealerScore === this.handScore) {
                this.roundActive = false;
                alertify.notify('Draw!');
                this.draw();
            } else if (this.dealerScore > 21) {
                this.roundActive = false;
                alertify.notify('Dealer is plus, you win');
                this.win();
            } else if (this.dealerScore > this.handScore) {
                this.roundActive = false;
                alertify.notify('Dealer Wins');
            } else if (this.dealerScore < 17) {
                this.roundActive = false;
                this.drawCardToDealer();
                this.pass();
            } else if (this.handScore > this.dealerScore && this.handScore < 22) {
                this.roundActive = false;
                alertify.notify('You win ' + this.bet * 1.5 + '!');
                this.win();
            }
        },

        draw() {
            this.money = (parseInt(this.money) + parseInt(this.bet));
        },

        win() {
            this.money += (parseInt(this.bet) * 2);
        },

        endRound() {
            this.roundActive = false;
            this.lastCard = null;
            this.status = null;
            this.dealersHand = [];
            this.dealerScore = 0;
            this.usersHand = [];
            this.handScore = 0;

            this.cards = this.generateDeck();
            this.shuffleDeck();
        },
    },
    created() {
        this.cardDeck = this.generateDeck();
        this.cards = this.generateDeck();
        this.shuffleDeck();

        let vue = this;

        alertify.set('notifier', 'position', 'top-center');
        vue.checkUserStatus();

        let bankInterval = setInterval(function () {
            vue.updateBankAccount();
        }, 10 * 1000);
    }
});