import React, { useState, useEffect } from 'react'
import { ConnectedPage as Page } from './page';
import { login } from '../actions/auth.actions';
import { connect } from 'react-redux';

export function LoginPage({ dispatch, isLoggedIn, history }) {

    const [ formData, setFormData ] = useState({username: '', password: ''});
    const onUsernameChange = evt => setFormData({ ...formData, username: evt.target.value });
    const onPasswordChange = evt => setFormData({ ...formData, password: evt.target.value });
   
    const onSubmit = evt => {
        evt.preventDefault();
        const { username, password } = formData;
        dispatch(login(username, password));
    }

    useEffect(() => {
       if (isLoggedIn) history.push('/home');
    }, [isLoggedIn]);

    return (
        <Page title="Login">
            <div className="section">
                <div className="columns">
                    <div className="column is-4 is-offset-4">
                        <div className="box">
                            <div className="field">
                                <label className="label">Nom d'utilisateur</label>
                                <div className="control">
                                    <input 
                                        value={formData.username}
                                        onChange={onUsernameChange}
                                        type="text" className="input" />
                                </div>
                            </div>
                            <div className="field">
                                <label className="label">Mot de passe</label>
                                <div className="control">
                                    <input
                                        value={formData.password}
                                        onChange={onPasswordChange}
                                        className="input" type="password" />
                                </div>
                            </div>
                            <div className="field is-grouped is-grouped-right">
                                <p className="control">
                                    <button onClick={onSubmit} 
                                        className="button is-primary">
                                        Se connecter
                                    </button>
                                </p>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </Page>
    );
}

function mapStateToProps({ session }) {
    return { isLoggedIn: session.isLoggedIn };
}

export const ConnectedLoginPage = connect(mapStateToProps)(LoginPage);