import React, { Component } from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { connect } from 'react-redux';
import { login } from '../../store/actions/auth';
import { validateEmail } from '../../util/validation';
import history from '../../history';

const INIT_STATE = {
    email: '',
    password: '',
    emailError: '',
    passwordError: '',
}

class LoginDialog extends Component {

    constructor(props) {
        super(props);
        this.state = INIT_STATE;
    }

    submitForm = event => {
        event.preventDefault();
        const isValid = this.validateInput();
        if (isValid) {
            const user = {
                email: this.state.email,
                password: this.state.password
            }
            this.props.login(user);
            this.setState(INIT_STATE, () => {
                this.props.toggle();
                history.push('/');
            });
        }
    }

    handleChange = event => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    validateInput = () => {
        var emailError = '';
        var passwordError = '';

        // password check
        if (this.state.password === '') {
            passwordError = `Password shouldn't be empty`;
        } else if (this.state.password.length < 6) {
            passwordError = `Password should containt at least 6 characters`;
        }

        // email check
        if (this.state.email === '') {
            emailError = `Email shouldn't be empty`;
        } else if(!validateEmail(this.state.email)) {
            emailError = `Wrong format of email address`;
        }

        if(emailError !== '' || passwordError !== '') {
            this.setState({
                emailError,
                passwordError
            }, () => {
                return false;
            });
        } else {
            return true;
        }

    }

    render() {
        return (
            <Modal show={this.props.show} onHide={this.props.toggle}>
                <Modal.Header closeButton>
                    <Modal.Title>Login</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <div className="form-group">
                            <label htmlFor="emailInput">Email address</label>
                            <input type="email" className="form-control" id="emailInput" value={this.state.email} onChange={this.handleChange} name="email" aria-describedby="emailError" placeholder="Enter email" />
                            <small id="emailError" className="form-text text-muted">{this.state.emailError}</small>
                        </div>
                        <div className="form-group">
                            <label htmlFor="passwordInput">Password</label>
                            <input type="password" className="form-control" id="passwordInput" value={this.state.password} onChange={this.handleChange} name="password" aria-describedby="passwordError" placeholder="Password" />
                            <small id="passwordError" className="form-text text-muted">{this.state.passwordError}</small>
                        </div>
                        <Button className="btn btn-block" type="submit" variant="success" onClick={this.submitForm}>Login</Button>
                    </form>
                </Modal.Body>
            </Modal>
        );
    }
}

export default connect(null, { login })(LoginDialog);