import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import {
  changeName,
  changePass,
  authReset,
  auth
} from '../../Reducers/User.js';

class SignForm extends Component {
  render() {
    const { name, password, token, error } = this.props.user;
    const { onNameChange, onPasswordChange, onSignIn, onSignUp } = this.props;

    const handleSignIn = () => { onSignIn(name, password) }
    const handleSignUp = () => { onSignUp(name, password) }

    return (
      <div>
        <div>
          <label htmlFor="user-name">Name:</label>
          <input id="user-name" type="text" value={name} onChange={(event) => onNameChange(event)}/>
        </div>
        <div>
          <label htmlFor="user-pass">Password:</label>
          <input id="user-pass" type="password" value={password} onChange={(event) => onPasswordChange(event)}/>
        </div>
        <button onClick={handleSignIn}>Sign In</button>
        <button onClick={handleSignUp}>Sign Up</button>
        <div> Token: {token} </div>
        <div> Error: {error} </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onNameChange: (event) => {
      dispatch(changeName(event.target.value));
    },
    onPasswordChange: (event) => {
      dispatch(changePass(event.target.value));
    },
    onSignIn: (name, password) => {
      dispatch(authReset());
      dispatch(auth('sign-in', name, password));
    },
    onSignUp: (name, password) => {
      dispatch(authReset());
      dispatch(auth('sign-up', name, password));
    }
  }
}

export default (connect(mapStateToProps, mapDispatchToProps)(SignForm));