Untitled

import React, { useState } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { useNavigate } from "react-router-dom";
import useFormData from "../hooks/useFormData";
import useSubmitForm from "../hooks/useSubmitForm";

export default function RegisterUserForm() {
  const [formData, handleInputChange] = useFormData({
    name: "",
    surname: "",
    birthdate: "",
    gender: "",
    workAddress: "",
    homeAddress: "",
  });

  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const navigate = useNavigate();
  const handleBackClick = () => {
    navigate(-1);
  };

  const handleSubmit = useSubmitForm(
    formData,
    setSuccessMessage,
    setErrorMessage
  );

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
        padding: "16px",
        boxSizing: "border-box",
        flexDirection: "column",
      }}
    >
      <Paper
        elevation={3}
        sx={{ padding: 4, maxWidth: "100%", width: "600px" }}
      >
        <Typography variant="h5" gutterBottom>
          Register New User
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6}>
            <TextField
              id="name"
              name="name"
              label="Name"
              variant="outlined"
              fullWidth
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          </Grid>
          <Grid item xs={12} sm={6}>
            <TextField
              id="surname"
              name="surname"
              label="Surname"
              variant="outlined"
              fullWidth
              value={formData.surname}
              onChange={handleInputChange}
              required
            />
          </Grid>
          <Grid item xs={12} sm={6}>
            <TextField
              id="birthdate"
              name="birthdate"
              label="Birthdate"
              type="date"
              variant="outlined"
              fullWidth
              value={formData.birthdate}
              onChange={handleInputChange}
              required
              InputLabelProps={{ shrink: true }}
            />
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormControl fullWidth variant="outlined" required>
              <InputLabel id="gender-label">Gender</InputLabel>
              <Select
                labelId="gender-label"
                id="gender"
                name="gender"
                value={formData.gender}
                label="Gender"
                onChange={handleInputChange}
              >
                <MenuItem value={"M"}>Male</MenuItem>
                <MenuItem value={"F"}>Female</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12} sm={6}>
            <TextField
              id="workAddress"
              name="workAddress"
              label="Work Address"
              variant="outlined"
              fullWidth
              value={formData.workAddress}
              onChange={handleInputChange}
            />
          </Grid>
          <Grid item xs={12} sm={6}>
            <TextField
              id="homeAddress"
              name="homeAddress"
              label="Home Address"
              variant="outlined"
              fullWidth
              value={formData.homeAddress}
              onChange={handleInputChange}
            />
          </Grid>
        </Grid>

        {successMessage && (
          <Typography variant="body1" color="success" sx={{ mt: 2 }}>
            {successMessage}
          </Typography>
        )}
        {errorMessage && (
          <Typography variant="body1" color="error" sx={{ mt: 2 }}>
            {errorMessage}
          </Typography>
        )}

        <Box mt={3} display="flex" justifyContent="center" gap={2}>
          <Button variant="contained" color="primary" type="submit">
            Register New User
          </Button>
          <Button
            variant="contained"
            sx={{
              backgroundColor: "black",
              color: "white",
              "&:hover": {
                backgroundColor: "gray",
              },
            }}
            onClick={handleBackClick}
          >
            Back
          </Button>
        </Box>
      </Paper>
    </Box>
  );
}