import { useState } from "react";
import { login } from "../api/client";
import { useNavigate } from "react-router";
import {
  Button,
  Checkbox,
  FormControlLabel,
  Grid,
  TextField,
  Typography,
} from "@mui/material";

export const Login = () => {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [rememberMe, setRememberMe] = useState(false);
  const navigate = useNavigate();

  const handleLoginFlow = () =>
    login(userName, password).then(() => {
      navigate("/signup");
    });

  return (
    <Grid container direction="column" spacing={2} alignItems="center">
      <Typography variant="h3">Login</Typography>
      <TextField
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
        placeholder="User"
      />
      <TextField
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={rememberMe}
            onChange={() => setRememberMe(!rememberMe)}
          />
        }
        label="Remember me"
      />
      <Button
        onClick={handleLoginFlow}
        variant="contained"
        color="primary"
        sx={{ width: "100%" }}
      >
        Login
      </Button>
      <Button
        variant="contained"
        color="secondary"
        sx={{ width: "100%" }}
        onClick={() => navigate("/register")}
      >
        Create an account
      </Button>
    </Grid>
  );
};