/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');


window.Vue = require('vue');

const app = new Vue({
    el: '#app',
    data: {
        title: 'Login',
        titleAdmin: 'Settings',
        editingUser: false,
        showSuccess: false,
        loginFailed: false,
        accountCreated: false,
        registerSuccessMessage: "Account successfully created! Please confirm your account to login.",
        loginFailureMessage: "",
        /*gameCreateSubmitted: false,
        gameCreateMessage: "",
        gameCreateAlert: null,
        userToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9qb2dvRGFNZW1vcmlhLmRldiIsImRhdGEiOnsidXNySWQiOjEsInVzck5hbWUiOiJhZG1pbiJ9fQ.6p9zbLWriXJ30QljZ0jDQj_BWMwaj6g5frqjvlG8S8s",
        newGame: {},
        games: [],
        myGames: [],
        selectedGameType: null*/
        userToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9qb2dvRGFNZW1vcmlhLmRldiIsImRhdGEiOnsidXNySWQiOjEsInVzck5hbWUiOiJhZG1pbiJ9fQ.6p9zbLWriXJ30QljZ0jDQj_BWMwaj6g5frqjvlG8S8s",

        loginSubmitted: false,
        loginCreateAlert: null,
        loginCreateMessage: "",
        emailLogin: "",
        passwordLogin: "",
        loginPage: true,
        registerPage: false,
        nameRegister: "",
        nicknameRegister: "",
        emailRegister: "",
        passwordRegister: "",
        passwordConfirmationRegister: "",
        passwordRecoveryPage: false,
        loginAdminPage: true,
        passwordRecovery: false,
        passwordRecoveryMessage: "",
        users: [],
        reason_blocked: "",
        currentUserId: 0,
        blockingUser: false
    },
    methods: {
        login: function () {
            this.loginSubmitted = true;

            if(this.emailLogin === "" && this.passwordLogin === "") {
                this.loginFailureMessage = "Username or password invalid";
                this.loginFailed = true;
                this.loginCreateAlert = {
                    "alert": true,
                    "alert-warning": true
                };
                return;
            }

            var config = {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };

            axios.post('api/login', {"email": this.emailLogin, "password": this.passwordLogin}, config)
                .then(response => {console.log("Success");
                                    this.userToken = response.data.data.api_token;
                                    this.loginPage = false;} );


        },
        openRegister: function () {
            this.registerPage = true;
            this.loginPage = false;

        },
        register: function () {
            var config = {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };

            axios.post('api/register', {"name": this.nameRegister,
                                        "nickname": this.nicknameRegister,
                                        "email": this.emailRegister,
                                        "password": this.passwordRegister,
                                        "password_confirmation": this.passwordConfirmationRegister}, config)
                .then(response => {console.log("Success");
                                    this.registerPage = false;
                                    this.loginPage = true;
                                    this.accountCreated = true;});
        },
        cancel: function () {
            this.loginPage = true;
            this.registerPage = false;
        },
        resetAdminPassword: function () {
            var config = {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };



            axios.post('api/resetAdminPassword', config)
                .then(response => {console.log("Success");
                                    this.passwordRecovery = true;
                                    this.passwordRecoveryMessage = "Please check your email to recover your password";
                                    this.loginAdminPage = true;});
        },
        blockUser: function (id) {
            this.currentUserId = id;
            this.blockingUser = true;
        },
        block: function () {
            var config = {
                headers: {
                    "Authorization": "Bearer " + this.userToken,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };
            axios.put('api/block/' + this.currentUserId, {'reason_blocked': this.reason_blocked},config)
                .then(response => {console.log("Success");
                                this.blockingUser = false;});
        }
        /*------GAME LOBBY------createGame: function () {
            this.gameCreateSubmitted = true;

            if(this.selectedGameType === null){
                this.gameCreateMessage = "Game type not selected";
                this.gameCreateAlert = {
                    "alert": true,
                    "alert-warning": true
                };
                return;
            }
            this.gameCreateMessage = "Game created";
            this.gameCreateAlert = {
                "alert": true,
                "alert-success": true
            };

            var config = {
                headers: {
                    "Authorization": "Bearer " + this.userToken,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };
            axios.post('api/game', {"type": this.selectedGameType}, config)
                .then(response => {console.log("Success");} );

            config = {
                headers: {"Authorization": "Bearer " + this.userToken}
            };
            axios.get('api/game/pending', config)
                .then(response => {this.games = response.data.games;} );
        },
        joinGame: function (game_id) {
            var config = {
                headers: {
                    "Authorization": "Bearer " + this.userToken,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };
            axios.put('api/game/' + game_id, null, config)
                .then(response => {
                    console.log("Success");
                    config = {
                        headers: {"Authorization": "Bearer " + this.userToken}
                    };
                    axios.get('api/game/pending', config)
                        .then(response => {this.games = response.data.games;} );
                } );
        },
        beginGame: function (game_id) {
            var config = {
                headers: {
                    "Authorization": "Bearer " + this.userToken,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };
            axios.put('api/game/begin/' + game_id, null, config)
                .then(response => {
                console.log("Success");
            config = {
                headers: {"Authorization": "Bearer " + this.userToken}
            };
                axios.get('api/game/pending', config)
                    .then(response => {this.myGames = response.data.games;} );
            } );
        }
        /*
        ,
        cancelGame: function (game_id) {
            var config = {
                headers: {
                    "Authorization": "Bearer " + this.userToken,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                }
            };
            axios.put('api/game/cancel/' + game_id, null, config)
                .then(response => {
                console.log("Success");
            config = {
                headers: {"Authorization": "Bearer " + this.userToken}
            };
            axios.get('api/game/my', config)
                .then(response => {this.myGames = response.data.games;} );
        } );
        }
        */
    },
    mounted() {
        config = {
            headers: {"Authorization": "Bearer " + this.userToken}
        };
        axios.get('api/usersIndex')
            .then(response=>{
                            this.users = response.data.data;} );
        /*-----LOBBY------var config = {
            headers: {"Authorization": "Bearer " + this.userToken}
        };
        axios.get('api/game/pending', config)
            .then(response => {this.games = response.data.games;} );*/

        /*
        config = {
            headers: {"Authorization": "Bearer " + this.userToken}
        };
        axios.get('api/game/my', config)
            .then(response => {this.myGames = response.data.games;} );
*/
    }
});