/**
 * @file Register.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import React, {useState} from 'react'
import {axiosPost} from "../../services/AxiosService";
import {useNavigate} from "react-router-dom";
import {Button, Grid, Paper, TextField, Typography} from "@mui/material";

const Register = () => {
    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();
    const [passwordConfirm, setPasswordConfirm] = useState();
    const [msg, setMsg] = useState('');
    const navigate = useNavigate();

    const registerUser = async (e) => {
        e.preventDefault();
        axiosPost("/register", {
            name: name,
            email: email,
            password: password,
            passwordConfirm: passwordConfirm,
        })
        .then((res) => {
            if (res.error !== undefined) {
                setMsg("Error: " + e.error);
                return;
            }
            navigate("/");
        })
        .catch((e) => {
            setMsg(e.response.data.error);
        });
    }

    return (
        <div className={"Center"}>
            <Paper elevation={5} sx={{ padding: 2, maxWidth: "300px" }}>
                <p>{msg}</p>
                <form onSubmit={registerUser}>
                    <Grid container rowSpacing="10" columns={{xs: 1}} justifyContent="center" alignItems="center" alignContent="center" textAlign="center">
                        <Grid item xs={1}>
                            <Typography variant={"h4"} textAlign="center">Registrace</Typography>
                        </Grid>
                        <Grid item xs={1}>
                            <TextField
                                id="name"
                                label="Jméno"
                                type="name"
                                onChange={(e) => setName(e.target.value)}
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField
                                id="email"
                                label="Email"
                                type="email"
                                onChange={(e) => setEmail(e.target.value)}
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField
                                id="password"
                                label="Heslo"
                                type="password"
                                onChange={(e) => setPassword(e.target.value)}
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField
                                id="passwordConfirm"
                                label="Heslo Znovu"
                                type="password"
                                helperText={password !== passwordConfirm ? "Hesla nejsou stejná!" : ""}
                                color={password !== passwordConfirm ? "warning" : "primary"}
                                onChange={(e) => setPasswordConfirm(e.target.value)}
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Button type="submit" variant="contained">Registrovat</Button>
                        </Grid>
                    </Grid>
                </form>
            </Paper>
        </div>
    );

}

export default Register
