import React from 'react'
import Page from './page';
import { ExtendedUserForm as UserForm } from '../components/UserForm';
import { connect } from 'react-redux';
import { createUser } from '../actions/user.actions';

export class HomePage extends React.PureComponent {

  render() {

    const { createUserFormError } = this.props;

  	const onUserFormSubmit = ({ username, password }) => {
      this.props.dispatch(createUser(username, password));
    };
    
    return (
        <Page title="home">
            <div className="section">
              <h1 className="title">Bienvenue sur PleaseWait !</h1>
              <h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
              <a href="#/logout">Se déconnecter</a>
              <UserForm onSubmit={onUserFormSubmit} errors={createUserFormError} />
            </div>
        </Page>
    );
  }
}

function transformErrorCode(code) {
  switch (code) {
      case 0:
          return {
              username: {
                  hasError: true,
                  message: "Le nom d'utilisateur ne peut pas être vide. (API)"
              }
          }
      default:
          return null;
  }
}

function mapStateToProps({ users }) {
  return {
    createUserFormError: transformErrorCode(users.createUserForm.errorCode), 
  }
}

export const ConnectedHomePage = connect(mapStateToProps)(HomePage)