import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import firebase from 'firebase';

const style = {
  textAlign: 'center',
  width: '500px',
  margin: '100px auto 0 auto',
  padding: '10px'
};

export default class Login extends Component {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  };

  constructor() {
    super();

    this.facebookProvider = new firebase.auth.FacebookAuthProvider();
    this.googleProvider = new firebase.auth.GoogleAuthProvider();
  }

  auth( providerName ) {
    const provider = this[providerName];
    var refs = firebase.database()
    firebase.auth()
      .signInWithPopup(provider)
      .then(response => {
        console.log( 'auth:', response );
        this.context.router.push('/');
        console.log(response.user.uid);
        refs.ref(`/users/${response.user.uid}`).update({ 
          displayName: response.user.displayName, 
          photoUrl: response.user.photoUrl 
        });
      })
      .catch(console.error)
  }

  render() {
    return (
      <div style={style}>
        <h3>Hello %username%</h3>
        <RaisedButton
          label='Log in with facebook'
          primary={true}
          onClick={e => this.auth( 'facebookProvider' )} />

        <RaisedButton
          label='Log in with Google'
          secondary={true}
          onClick={e => this.auth( 'googleProvider' )} />
      </div>
    )
  }
};

@@ -792,16 +792,17 @@
 h('/');%0A
+%0A
         
@@ -830,19 +830,71 @@
 user.uid
+, response.user.displayName, response.user.photoURL
 );%0A
+%0A
         
@@ -941,17 +941,16 @@
 update(%7B
- 
 %0A       
@@ -991,17 +991,16 @@
 layName,
- 
 %0A       
@@ -1036,11 +1036,10 @@
 otoU
-rl 
+RL
 %0A   

fix photoURL