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);