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

const Reg = ({ onReg, LogedIn }) => {
    const [login, setLogin] = useState("");
    const [password, setPassword] = useState("");
    return (
      <>
        <div className="container">
          <div id="loginbox" style={{ marginTop: "120px", border:"1px solid black"}}>
            <div>
              <div  style = {{backgroundColor:'pink'}}>
                <div>Registration</div>
              </div>

              <div style={{paddingTop: "30px"}} className="panel-body">
                <form id="loginform" role="form">
                  <div style={{marginBottom: "25px"}}>
                    <input id="login-username" type="text" className="form-control" name="username"
                      value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>
                  </div>

                  <div style={{marginBottom: "25px"}}>
                    <input id="login-password" type="password" className="form-control"
                        name="password" placeholder="Password" value={password}
                        onChange={(e) => setPassword(e.target.value)}/>
                  </div>

                  <div style={{marginTop: "10px"}} className="form-group">
                    <div className="">
                      <a id="btn-login" href="#" onClick={() => onReg(login, password)}>
                        Зарегестрироваться
                      </a>
                    </div>
                  </div>

                  <div className="form-group">
                    <div className="">
                      <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
                        <a href="/login">Авторизоваться</a>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </>
    );
};

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

export default RegForm;
