let app = new Vue({
    el: '#root',
    data: {
        roundActive: false,
        cardBack: 'img/cardBack_red5.png',
        cards: [],
        cardDeck: [],
        usersHand: [],
        dealersHand: [],
        lastCard: null,
        handScore: 0,
        dealerScore: 0,
        status: '',
    },
    methods: {
        generateDeck() {
            const symbolNames = ['spades', 'clubs', 'diamonds', 'hearts'];
            const highCards = ['j', 'q', 'k'];

            let cardDeck = [];

            symbolNames.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() {
            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)) {
                this.status = 'Hand is plus, you lose.';
                this.roundActive = false;
            }
        },

        pass() {
            if (this.dealerScore === this.handScore) {
                this.roundActive = false;
                this.status = 'Draw!'
            } else if (this.dealerScore > 22) {
                this.roundActive = false;
                this.status = 'Dealer is plus, you win';
            } else if (this.dealerScore > this.handScore) {
                this.roundActive = false;
                this.status = 'Dealer Wins';
            } else if (this.dealerScore < 17) {
                this.roundActive = false;
                this.drawCardToDealer();
                this.pass();

                // this.status = 'Dealer drawing not yet implemented';
            } else if (this.handScore > this.dealerScore && this.handScore < 22) {
                this.roundActive = false;
                this.status = 'You win!';
            }
        },

        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();
        },

        dealerWon() {
            console.log('House wins')
        },

        userWon() {
            console.log('You win')
        },

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