import React from 'react';
import Formsy from 'formsy-react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Formsytext from 'formsy-material-ui/lib/FormsyText';
import RaisedButton from 'material-ui/RaisedButton';
import {blueA400} from 'material-ui/styles/colors'
import {redA400} from 'material-ui/styles/colors'
import {Base,styles} from './base';
import reqwest from 'reqwest';
export class SignUp extends Base{
  submit(){
    reqwest ({
      url: '/users',
      metod: 'POST',
      data: {
        user:{
          email: this.state.email,
          password: this.state.password,
          passwordConfirmation: this.state.passwordConfirmation
        }
      },
      headers:{
        'X-CSRF-Token':window.memoriaTokenReal.token
      }
    }).then(data =>{
      console.log(data);
    }).catch(err => console.log(err));
  }
  render(){
    return(
      <MuiThemeProvider>
        <Formsy.Form onValid={ ()=>this.enableSubmitBtn() }
                     onInvalid={ ()=>this.disableSubmitBtn() }
                     onValidSubmit={ () => this.submit() } >
          <div>
            <Formsytext
              onChange = {(e) => this.syncField(e,"email")}
              name = "email"
              required
              floatingLabelFocusStyle = {styles.floatingLabelFocusStyle}
              underlineFocusStyle = {styles.underlineStyle}
              validations = "isEmail"
              validationError = "Asegúrate de introducir el correo electrónico válido"
              floatingLabelText= "Correo electrónico" />
          </div>
          <div>
            <Formsytext
              onChange = {(e) => this.syncField(e,"password")}
              name = "password"
              required
              floatingLabelFocusStyle = {styles.floatingLabelFocusStyle}
              underlineFocusStyle = {styles.underlineStyle}
              type = "password"
              floatingLabelText= "Contraseña" />
          </div>
          <div>
            <Formsytext
              onChange = {(e) => this.syncField(e,"passwordConfirmation")}
              name = "password"
              required
              floatingLabelFocusStyle = {styles.floatingLabelFocusStyle}
              underlineFocusStyle = {styles.underlineStyle}
              type = "password"
              floatingLabelText= "Confirmar contraseña" />
          </div>
          <div>
            <RaisedButton
              style = {styles.buttonTop}
              backgroundColor = {styles.red}
              labelColor = '#ffffff'
              disabled = {!this.state.canSubmit}
              type = "submit"
              label = "Crear Cuenta" />
              <a href="#" onClick={this.props.toggle} style={styles.leftSpace}> Ya tengo una cuenta </a>
          </div>
        </Formsy.Form>
      </MuiThemeProvider>
    );
  }
}