import React, { useState } from 'react';
import axiosapi from '../api/axiosapi';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    // Styles for various elements
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
}));

const Signup = () => {
  const classes = useStyles();
  const [formData, setFormData] = useState({
    email: '',
    username: '',
    password: '',
  });
  const [error, setError] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
        axiosapi.createUser(formData);
    } catch (error) {
        console.error('Error creating user:', error);
        setError('Registration failed. Please try again.'); // Set an error message
    } finally {
        setIsSubmitting(false);
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Sign Up
        </Typography>
        <form className={classes.form} onSubmit={handleSubmit}>
          <TextField
            variant="outlined"
            margin="normal"
            type="email"
            name="email"
            fullWidth
            value={formData.email}
            onChange={handleChange}
            label="Email"
          />
          <TextField
            variant="outlined"
            margin="normal"
            type="text"
            name="username"
            fullWidth
            value={formData.username}
            onChange={handleChange}
            label="Username"
          />
          <TextField
            variant="outlined"
            margin="normal"
            type="password"
            name="password"
            fullWidth
            value={formData.password}
            onChange={handleChange}
            label="Password"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            disabled={isSubmitting}
          >
            {isSubmitting ? 'Signing up...' : 'Sign Up'}
          </Button>
        </form>
        {error && <Typography color="error">{error}</Typography>}
      </div>
    </Container>
  );
};

export default Signup;