import React, { useState } from "react";
import { connect } from "react-redux";
import { actionFullRegister } from "../../actions";
import { LoginPage, StyledLoginForm } from "../LoginForm/login-page.module";
import { TextField, Button, Link, Box } from "@mui/material";

const RegistrForm = ({ onReg }) => {
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
  const [passwordRepeat, setPasswordRepeat] = useState("");
  return (
    <LoginPage>
      <StyledLoginForm>
        <TextField
          sx={{ marginBottom: "5px" }}
          type="text"
          placeholder="Enter login"
          value={login}
          onChange={(e) => setLogin(e.target.value)}
        />
        <TextField
          sx={{ marginBottom: "5px" }}
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <TextField
          sx={{ marginBottom: "5px" }}
          type="password"
          placeholder="Repeat password"
          value={password}
          onChange={(e) => setPasswordRepeat(e.target.value)}
        />
        <Button
          sx={{ marginBottom: "5px" }}
          variant="contained"
          disabled={!login || !password}
          onClick={() => onReg(login, password)}
        >
          Login
        </Button>
        <Box>
          Есть аккаунт?
          <Link href="/log">Вход</Link>
        </Box>
      </StyledLoginForm>
    </LoginPage>
  );
  return (
    <div className="login-page">
      <div className="login-form">
        <input
          class="login"
          type="login"
          placeholder="Enter login"
          value={login}
          onChange={(e) => setLogin(e.target.value)}
        />
        <input
          class="password"
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <input
          class="repeatpassword"
          type="password"
          placeholder="Password"
          value={passwordRepeat}
          onChange={(e) => setPasswordRepeat(e.target.value)}
        />
        <button
          class="btn"
          disabled={!login || !password || passwordRepeat !== password}
          onClick={() => onReg(login, password)}
        >
          Submit
        </button>
        <p>
          Есть аккаунт?<a href="/log">Вход</a>
        </p>
      </div>
    </div>
  );
};

export const ConnectRegistrForm = connect(null, { onReg: actionFullRegister })(
  RegistrForm
);
