import Vue from 'vue'
import App from './App'
import Firebase from 'firebase';
import vuefire from 'vuefire';
import { store } from './store/store';
import router from './router/index';
import { config } from './firebase-config'

Vue.config.productionTip = false
Vue.use(vuefire)
export const firebaseApp = Firebase.initializeApp(config);
export const db = firebaseApp.database();
export const usersRef = db.ref('users')

Firebase.auth().onAuthStateChanged(function(user){
    new Vue({
          el: '#app',
          router,
          store,
          components: { App },
          template: '<App/>'
        })
})

<template>
  <section class="section">
    <div class="col-half">
      <h2>Create an Account</h2>
      <form v-on:submit.prevent>
        <div class="control">
          <input class="input" type="text" placeholder="Your Display Name">
        </div>
        <div class="control">
          <input class="input" type="email" placeholder="joe@someplace.com" >
        </div>
        <div class="control">
          <input id="password" class="input" type="password" placeholder="Password">
        </div>
        <div class="control">
          <input id="confirm_password" class="input" type="password"  placeholder="Retype your password" v-on:keyup="checkRetypePassword">
        </div><span id='message'></span>
        <button type="submit" class="button is-primary" v-on:click="signUp">Register</button><span> or </span><button type="submit" class="button is-primary" v-on:click="googleSignUp">Register with Google</button>
      </form>
      <p>Already registered? <router-link to="/Sign-In">Log in</router-link></p>
    </div>
  </section>
</template>

<script>
import Firebase from "firebase";
import { usersRef, firebaseApp } from '../main';

var provider = new Firebase.auth.GoogleAuthProvider();
var emailRE = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/

export default {
  data: function() {
    return {
      username: this.$store.getters.getUser.displayName, //side comment, this is throwing an error if user is not signed in, not important but I thought I should mention
      email: "",
      password: "",
      ref: "",

    };
  },
  firebase() {
      return {
      users: usersRef,
      newUser: {
            name: '',
            email: '',
            uid: ''
        }
    }
  },
  beforeMount(){
    this.checkuserlogged()
  },
  methods: {
    signUp: function() {
      Firebase.auth().createUserWithEmailAndPassword(email, password).then(function(user) {
        var user = Firebase.auth().currentUser;
        logUser(user); // Optional
      }, function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
    });
      function logUser(user) {
          var ref = firebase.database().ref("users");
          var obj = {
              "user": {
                name: '',
                email: '',
              },
          };
          console.log(obj);
          ref.push(obj); // or however you wish to update the node
      }

    },
    googleSignUp: function() {
      Firebase.auth().signInWithRedirect(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handling Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
      });
    },

    // PREVIOUS FAILED ATTEMPT TO REGISTER USERS AND WRITE TO  DB
    // registerUserDbwriteUserData: function(userId, name, email, imageUrl) {
    //   user.onAuth(function(authData) {
    //     if (authData && isNewUser) {
    //       // save the user's profile into the database so we can list users,
    //       // use them in Security and Firebase Rules, and show profiles
    //       firebase.database().ref('users/' + userId).set({
    //         username: name,
    //         email: email,
    //         profile_picture : imageUrl
    //       });
    //     }
    //   });
    //   googleSignUp();
    // },

    checkuserlogged: function(){
      var user = Firebase.auth().currentUser;
      if ( user != null ) {
        this.$router.replace('/dashboard');
      }
    },
    checkRetypePassword: function(){
      var password = document.getElementById('password');
      var confirmPassword =  document.getElementById('confirm_password');
      var message = document.getElementById('message');
      if (password.value == confirmPassword.value) {
        confirmPassword.style.color = '#8F5';
        message.style.color = '#8F5';
        message.innerHTML = 'Retype is matching';
      } else {
        confirmPassword.style.color = 'red';
        message.style.color = 'red';
        message.innerHTML = 'Password is not matching';
      }
    }
  }
};
</script>

<style>

</style>