import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    Redirect,
  } from "react-router-dom";
const addInput = (userName, password) =>{
    return {
        type: 'LOGIN',
        userName,
        password
    }
}

class Login extends Component {
    render() {
        if(this.props.inputs.check === false){
            alert(this.props.inputs.alert)
        }
        if(this.props.inputs.check !== true){
            return <Redirect to="/logout" />;
        }
            let userName;
            let password;
            return (
                    <form >
                        <div className="row">
                            <div className="col-lg-8 mx-auto">
                                <div className="control-group">
                                <div className="form-group floating-label-form-group controls mb-0 pb-2">
                                    <input ref={node => userName = node}  name="fName" className="form-control"  type="text" placeholder="User Name" required="required" data-validation-required-message="Please enter your User Name." aria-invalid="false" />
                                    <p className="help-block text-danger" />
                                </div>
                                </div>
                                <div className="control-group">
                                <div className="form-group floating-label-form-group controls mb-0 pb-2">
                                    <input ref={node => password = node} name="fPass" className="form-control" id="email" type="password" placeholder="Password" required="required" data-validation-required-message="Please enter your password." aria-invalid="false" />
                                    <p className="help-block text-danger" />
                                </div>
                                </div>
                                <div className="form-group">
                                <button onClick={() =>{
                                    this.props.onInputClick(userName.value,password.value)
                                    userName.value=''
                                    password.value=''
                                }} className="btn btn-primary btn-xl btn-block">Login</button>
                                </div>

                            </div>
                        </div>
                    </form>
            );

    }
}
const mapStateLoginProps = (state) =>{
    return {
        inputs:state
    }
}

const mapDispatchLoginProps = (dispatch) =>{
    return {
        onInputClick: (userName,password) =>{dispatch(addInput(userName,password))
    }
    }
}

export default connect(
    mapStateLoginProps,
    mapDispatchLoginProps
)(Login);