import { connect } from "react-redux";
import { useState} from "react";
import { actionFullRegister } from "../actions";
import { Redirect } from "react-router-dom";

const Reg = ({ onReg,LogedIn }) => {
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
      //надо тип инпуту
  //надо проверку на пустоту инпутов и запрет кнопки (disabled)
  //надо при кнопке отправить в onLogin login и пароль. onLogin - это функция-колбэк
  return LogedIn? <Redirect to = "/"/> :
  (
    <>
      <div className="container">    
      <div id="loginbox" style={{"margin-top":"50px"}} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
          <div className="panel panel-info" >
                  <div className="panel-heading">
                      <div className="panel-title">Registration</div>
                  </div>     

                  <div style={{"padding-top":"30px"}} className="panel-body" >

                      <div style={{"display":"none"}} id="login-alert" className="alert alert-danger col-sm-12"></div>
                          
                      <form id="loginform" className="form-horizontal" role="form">
                                  
                          <div style={{"margin-bottom": "25px"}} className="input-group">
                                      <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
                                      <input id="login-username" type="text" className="form-control" name="username" value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>                                        
                                  </div>
                              
                          <div style={{"margin-bottom": "25px"}} className="input-group">
                                      <span className="input-group-addon"><i className="glyphicon glyphicon-lock"></i></span>
                                      <input id="login-password" type="password" className="form-control" name="password" placeholder="Password" value = {password} onChange={(e) => setPassword(e.target.value)}/>
                                  </div>
                              <div style={{'margin-top':"10px"}} className="form-group">
                                  <div className="col-sm-12 controls">
                                    <a id="btn-login" href="#" className="btn btn-success" onClick={() => (onReg(login, password))}>Sign up  </a>

                                  </div>
                              </div>


                              <div className="form-group">
                                  <div className="col-md-12 control">
                                      <div style={{"border-top": "1px solid#888", "padding-top":"15px", "font-size":"85%"}}>
                                      <a href="/login">
                                          Login Here
                                      </a>
                                      </div>
                                  </div>
                              </div>    
                          </form>     



                      </div>                     
                  </div>  
      </div>
  </div>
      
    </>
    );
  };
  
  const RegForm = connect(state => ({LogedIn:state?.auth?.token}), {onReg: actionFullRegister})(Reg)

  
export default RegForm