import React from 'react';
import { connect } from '@cerebral/react';
import { state, signal } from 'cerebral/tags';
import s from './Login.module.scss';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
    }

    updateField(fieldName, value) {
        this.setState({
            [fieldName]: value,
        });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.props.login({
            email: this.state.email,
            password: this.state.password,
        });
    }

    handleLogout(event) {
        event.preventDefault();
        this.props.logout();
    }

    render() {
        const { loginStatus, isLoggedIn } = this.props;

        return (
            <form className={s.form}>
                <div className={s.inputGroup}>
                    <label htmlFor="email">E-Mail:</label>
                    <input type="text" id="email" value={this.state.email} onChange={(e) => this.updateField('email', e.target.value)} />
                </div>

                <div className={s.inputGroup}>
                    <label htmlFor="email">Password:</label>
                    <input type="password" id="password" value={this.state.password} onChange={(e) => this.updateField('password', e.target.value)} />
                </div>

                {loginStatus === 'error'
                    ? (
                        <div className={s.error} id="error">
                            There was an Error!
                        </div>
                    )
                    : null
                }

                {isLoggedIn
                    ? <button onClick={this.handleLogout} id="logout">Logout</button>
                    : <button onClick={this.handleSubmit} id="login">Login</button>
                }

            </form>
        );
    }
}

export default connect(
    {
        login: signal`app.login`,
        logout: signal`app.logout`,
        loginStatus: state`app.loginStatus`,
        isLoggedIn: state`app.isLoggedIn`,
    },
    Login
);