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

const LoginForm = ({ onLogin }) => {
  const [login, setLogin] = useState("");
  const [password, setPassword] = 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)}
        />
        <Button
          sx={{ marginBottom: "5px" }}
          variant="contained"
          disabled={!login || !password}
          onClick={() => onLogin(login, password)}
        >
          Login
        </Button>
        <Box>
          У вас ещё нет аккаунта?<Link href="/reg">Зарегистрироваться</Link>
        </Box>
      </StyledLoginForm>
    </LoginPage>
  );
};

export const ConnectLoginForm = connect(null, { onLogin: actionFullLogin })(
  LoginForm
);
