import React, { Component } from 'react';
import firebase from 'firebase';
import ForgotPss from './components/ForgotPss';
import Home from './components/Home.js';
import Modal from 'react-modal';
import './App.css';


const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)'
    }
};

class App extends Component {

  constructor () {
    super();
    this.state = {
      user: null,
      email: null,
      password: null,
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);

    this.handleLogout = this.handleLogout.bind(this);
    this.handleAuth = this.handleAuth.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }


  closeModal() {
    this.setState({modalIsOpen: false});
    const recover = firebase.auth();
      recover.sendPasswordResetEmail(this.state.email).then( response => {
        console.log('Se envio un correo a su cuenta.',response);
     }).catch( error => {
      console.log('error', error);
    });
  }

  recoverPass(mailAddres){

  }

  componentWillMount (){
    firebase.auth().onAuthStateChanged(user => {
      this.setState({user});
    });
  }


  handleAuth(){
    //const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
    .then(result => console.log(`${result.user.email} ha iniciado sesion`))
    .catch(error => console.log(`Error ${error.code} : ${error.message} `));
  }

  handleLogout(){
    firebase.auth().signOut()
      .then(result => console.log(`${result.user.email} ha salido`))
      .catch(error => console.log(`Error ${error.code} : ${error.message} `));
  }

  handleForgotPassword(){
     return <ForgotPss />;
  }


 handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
 }

  renderLoginButton(){
    if(this.state.user){
      return(
        <Home onLogOut={this.handleLogout}/>
      )
    }else{
      return(
          <div className="row">
            <div className="col-md-4 col-md-offset-4">
                <div className="panel panel-default">
                  <div className="panel-heading">
                    <h3 className="panel-title">Ingresar</h3>
                   </div>
                  <div className="panel-body">
                    <form accept-charset="UTF-8" >
                    <fieldset>
                      <div className="form-group">
                          <input className="form-control" placeholder="E-mail" name="email" type="email" value={this.state.email}  onChange={this.handleInputChange}  />
                      </div>
                      <div className="form-group">
                        <input className="form-control" placeholder="Contraseña" name="password" type="password" value={this.state.password}  onChange={this.handleInputChange}  />
                      </div>

                      <div className="form-group">
                        <a  onClick={this.openModal} >Olvido su contraseña?</a>
                      </div>
                      <input className="btn btn-lg btn-success btn-block" onClick={this.handleAuth} value="login Google"/>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        )
    }
  }

  render() {
    return (
        <div className="container">
          {this.renderLoginButton()}
           <Modal
            isOpen={this.state.modalIsOpen}
            onAfterOpen={this.afterOpenModal}
            onRequestClose={this.closeModal}
            style={customStyles}
            contentLabel="Example Modal"
             >


                  <div className="panel panel-default">
                   <div className="panel-heading">
                       <h3 className="panel-title">Ingresa el email que validara tu contraseña</h3>
                    </div>
                   <div className="panel-body">
                    <form accept-charset="UTF-8" >
                    <fieldset>
                      <div className="form-group">
                          <input className="form-control" placeholder="E-mail" name="email" type="email" value={this.state.email}  onChange={this.handleInputChange}  />
                      </div>

                      <input className="btn btn-lg btn-success btn-block" onClick={this.closeModal} value="Recuperar Contrasena"/>
                    </fieldset>
                    </form>
                  </div>
                </div>

          </Modal>
        </div>
    );
  }
}

export default App;