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" }}
          className=""
        >
          <div className="" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>
            <div className="" style = {{backgroundColor:'#ADD8E6' }}>
              <div className="" >Registration</div>
            </div>

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

              <form id="loginform" className="" role="form">
                <div style={{ "margin-bottom": "25px" }}>
                  <span className="">
                    <i className=""></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="">
                  <span className="">
                    <i className=""></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="">
                    <a id="btn-login" href="#" className="" onClick={() => onReg(login, password)}>
                      Sign up{" "}
                    </a>
                  </div>
                </div>

                <div className="form-group">
                  <div className="">
                    <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;