import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import axios from 'axios';
import JsonTable from 'react-json-table';

//Redux functions
import { setUsername, setPassword, setId, setEmail, setFirstname, setLastname, setPosts } from '../actions/userActions';

@connect(({user}) => {
  return {
    user: user.user,
  }
})
class RegistrationForm extends React.Component{

  constructor(){
    super();
  }

  handleFormSubmit(){
    if(this.refs.password.value === this.refs.password2.value){

      this.props.dispatch((dispatch) => {
        dispatch(setUsername(this.refs.username.value));
        dispatch(setPassword(this.refs.password.value));
        dispatch(setEmail(this.refs.email.value));
        dispatch(setFirstname(this.refs.firstname.value));
        dispatch(setLastname(this.refs.lastname.value));
      });
      console.log(this.props.user);
     //axios.put('/user', this.props.user);
    }else{
      console.log('Please repeat your password!');
    }
  }

  componentWillMount(){

  }

  render(){
    return(
      <form onSubmit={this.handleFormSubmit.bind(this)}>
      <h2>Registration</h2>
        <label>
          <input type="text" defaultValue="brotasco" size="200px" placeholder="Username" ref="username" required/>
        </label><br/>
        <label>
          <input type="password" defaultValue="brotasco" size="200px" placeholder="Password" ref="password" required/>
        </label><br/>
        <label>
          <input type="password" defaultValue="brotasco" size="200px" placeholder="Repeat Password" ref="password2" required/>
        </label><br/>
        <label>
          <input type="text" size="200px" defaultValue="Mario" placeholder="Firstname" ref="firstname" required/>
        </label><br/>
        <label>
          <input type="text" size="200px" defaultValue="Maeder" placeholder="Lastname" ref="lastname" required/>
        </label><br/>
        <label>
          <input type="email" size="200px" defaultValue="brotasco@gmail.com" placeholder="Email" ref="email" required/>
        </label><br/>
        <input type="submit" value="Submit"/>
      </form>
    );
  }

}

export default RegistrationForm;

export default function reducer(state={
  user: {
    userid: null,
    username: null,
    password: null,
    email: null,
    firstname: null,
    lastname: null,
    posts: null,
  }
}, action){
  switch(action.type) {
    case 'SET_USERNAME':{
     return {
       ...state,
       user: {...state.user, username: action.payload}
      }
    }
    case 'SET_PASSWORD':{
       return{
        ...state,
        user: {...state.user, password: action.payload}
       }
    }
    case 'SET_ID':{
       return{
        ...state,
        user: {...state.user, userid: action.payload}
       }
    }
    case 'SET_EMAIL':{
       return{
        ...state,
        user: {...state.user, email: action.payload}
       }
    }
    case 'SET_FIRSTNAME':{
       return{
        ...state,
        user: {...state.user, firstname: action.payload}
       }
    }
    case 'SET_LASTNAME':{
       return{
        ...state,
        user: {...state.user, lastname: action.payload}
       }
    }
    case 'SET_POSTS':{
       return{
        ...state,
        user: {...state.user, posts: action.payload}
       }
    }
    case 'SET_USER':{
      return { ...state, user: action.payload}
    }
  }

  return state
}