/**
 * @note: it is a bit hard to code review without you making pull requests
 *        on github so will do my best to just write it here.
 *        also note on the UI, put the instructions first it was confusing
 *        to see them on the bottom
 */

$(document).ready(function () {
// no space between `function` and `()`

    $('.restart').hide();
    // use single tab (this goes for the entire application)

    var yourChosen = false;
    // isChosen
    // bool variables try to get in the habit of starting them with `is`
    // the benefit of that is you can see off the bat what that variable
    // is trying to do

    var attacker = [];
    // this seems like should be an object. will get back to this

    var defender = [];
    // this seems like should be an object. will get back to this

    var charactersLeft = 3;

    var gameOver = false;

    var startPage = $("body");
    // this does not seem good. will probably need refactor. will get back to this

    var characters = [{
        health: 100,
        attack: 12,
        counter: 5,
        name: "Pikachu",
    }, {
        health: 120,
        attack: 8,
        counter: 10,
        name: "Charizard",
    }, {
        health: 150,
        attack: 4,
        counter: 20,
        name: "Snorlax",
    }, {
        health: 180,
        attack: 2,
        counter: 25,
        name: "MewTwo",
    }
    ];

    if (yourChosen === false) {
    // `yourChosen` and this whole `if` block seems unnecessary
    // once the user clicks on a `.available` pokemon, the jquery at the end
    // of the function will then display the `.available` pokemon to be
    // selected as opponents
    // therefore you can remove `yourChosen`

        $(".textBox").text("Message: Please Select Character, TURN UP SOUND to hear epicness!!!");
        // perhaps add this to the html file and just make it as the default text
        // then you can remove this line
        // use single quotes throughout only (this only applies to javascript file)

        startPage.on("click", ".available", function () {
        // why not put the click event handler just on the `.available` divs?
        // $('.available').on('click', function() {})

            document.getElementById('audiotag').play().autoplay;
            // this is not necessary as you already placed the `autoplay` attribute on the
            // html file

            $(this).appendTo('#chosenChar').removeClass("available").addClass("chosenOne");
            // this is a bit difficult to read try formatting chains like so:
            // $(this)
            //   .appendTo('#chosenChar')
            //   .removeClass('available')
            //   .addClass('chosenOne');
            // note: do not use ids. classes are preferred

            attacker.push(characters[$(this).attr("value")].health);
            attacker.push(characters[$(this).attr("value")].attack);
            attacker.push(characters[$(this).attr("value")].counter);
            attacker.push(characters[$(this).attr("value")].name);
            // seems like it would be easier to add a key/value into the a
            // character object and change the characters array into an object

            // var attacker;

            // var characters = {
            //   pikachu: {
            //     health: 100,
            //     attack: 12,
            //     counter: 5,
            //     name: "Pikachu",
            //   },
            //   ...
            // };

            // attacker = characters[$(this).attr('value').toLowerCase()];

            $(".textBox").text("Great, now please select your opponent! Also if your sound still isn't up, your missing out on epicness");
            $(".available").appendTo("#enemyAvail").removeClass("available").addClass('enemyChoose');
        });
    }

    yourChosen = true;
    // can remove

    $(".restart").on("click", function(){
        location.reload();
    })
    // seems like this should be displayed only when game is over
    // doesn't make sense to allow the user to restart at the beginning
    // of the game
    // missing semicolon at the end

    function opponentChoose() {
    // `chooseOpponent` sounds better
        if (yourChosen === true) {
            startPage.on("click", ".enemyChoose", function () {
            // it seems that `opponentChoose` function is not even necessary
            // you can place this click event on top next to the other click event
                $(this).appendTo("#currentOpp").removeClass("enemyChoose").addClass('fightHim');
                // place this at the bottom of the function similiar to where you have
                // it in the other click event handler
                defender.push(characters[$(this).attr("value")].health);
                defender.push(characters[$(this).attr("value")].attack);
                defender.push(characters[$(this).attr("value")].counter);
                defender.push(characters[$(this).attr("value")].name);
                // same as above can alter the characters object

                // var defender;

                // var characters = {
                //   pikachu: {
                //     health: 100,
                //     attack: 12,
                //     counter: 5,
                //     name: "Pikachu",
                //   },
                //   ...
                // };

                // defender = characters[$(this).attr('value').toLowerCase()];

                $(".textBox").text("Now attack!!!! He's trying to take your lunch money");

                // i would have the attack button hidden until this point
                // then you can get rid of the battle function
            });
        }
    }

    //fight opponent
    function battle() {
    // this function is unnecessary

        $(".attackButton").on("click", function () {
        // with the above refactor this function is less difficult to read
        // if (attacker.health > 0) {
        //   defender.health -= attacker.attack;
        //   attacker.health -= defender.counter;

        //   $('.textBox')
        //     .text([
        //       'You attacked opponent for',
        //       attacker.attack,
        //       'damage.',
        //       'Opponent attacked you for',
        //       defender.counter
        //     ].join(' '));
        //   // btw you can't use es6 without a compilier so stick to es5 for now

        //   $('.chosenOne .card-footer')
        //     .text(['Health:', attacker.health].join(' '));

        //   $('.fightHim .card-footer')
        //     .text(['Health:', defender.health].join(' '));

        //   // not good to nest if statements but oh well
        //   if (defender.health <= 0) {
        //     charactersLeft--;

        //     $('.textBox')
        //       .text([
        //         'You have defeated',
        //         defender.name,
        //         'and you have',
        //         charactersLeft,
        //         'characters remaining'
        //       ].join(' '));

        //     $('.fightHim').remove();

        //     defender = {};

        //     // opponentChoose here doesn't actually do anything. the reason
        //     // being is that the click event handler is still attached to the
        //     // elements. you never actually turned the handlers `off`.
        //     // therefore i recommend turning off the click even handler until
        //     // this time
        //     if (!charactersLeft) {
        //     // in js 0 is a falsey value
        //       // this is the same
        //     }
        //   }
        // } else {
        //   // this is the same
        // }
            if (attacker[0] > 0) {
                defender[0] = defender[0] - attacker[1];
                attacker[0] = attacker[0] - defender[2];
                $(".textBox").text(`You attacked opponent for ${attacker[1]} damage. Opponent attacked you for ${defender[2]}`);
                $(".chosenOne .card-footer").text(`Health: ${attacker[0]}`);
                $(".fightHim .card-footer").text(`Health: ${defender[0]}`);
                attacker[1] += attacker[1];
                // why does their attack get stronger?
                if (defender[0]<= 0){
                    charactersLeft--;
                    $(".textBox").text(`You have defeated ${defender[3]}, and you have ${charactersLeft} characters remaining`);
                    $(".fightHim").remove();
                    defender = [];
                    opponentChoose();
                    if(charactersLeft === 0){
                        $(".textBox").text("You win big man!!!! Hit restart to play again");
                        $(".restart").show();
                        }
                }
            }else{
                $(".textBox").text("You lose loser!!! Hit restart to attempt to win, but I highly doubt it");
                $(".restart").show();
            }
        })
    }

    opponentChoose();
    // can remove

    battle();
    // can remove

    // why all this blank space?





});