import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Header from "../components/Header";
import Footer from "../components/Footer";
import axios from "axios";
export default function Signup() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    password2: "",
  });

  const [errors, setErrors] = useState({});
  function handleInputChange(event) {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  }
  function validateForm() {
    const errors = {};
    if (formData.name.length === 0) {
      errors.name = "username is required";
    } else if (formData.name.length > 30) {
      errors.name = "make sure the length of username is less than 30";
    }

    const hasLetter = /[a-zA-Z]/.test(formData.password);
    const hasNumber = /\d/.test(formData.password);
    const isLengthValid =
      formData.password.length >= 8 && formData.password.length <= 15;
    if (formData.password.length === 0) {
      errors.password = "password is required";
    } else if (!hasLetter || !hasNumber || !isLengthValid) {
      errors.password = "please enter valid password format";
    }

    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    const isEmailValid = emailRegex.test(formData.email);
    if (formData.email.length === 0) {
      errors.email = "email is required";
    } else if (!isEmailValid) {
      errors.email = "Please enter valid email address";
    }

    if (formData.password2 !== formData.password) {
      errors.password2 =
        "Please make sure confirmed password is the same as password";
    }

    return errors;
  }
  function handleSubmit(event) {
    event.preventDefault();
    const val = validateForm();
    setErrors(val);

    if (Object.keys(errors).length === 0) {
      console.log(formData)
      axios
        .post("http://localhost:3000/user/register", formData)
        .then((response) => {
          console.log("Form submitted successfully");
        })
        .catch((error) => {
          console.error("Form submission error", error);
        });
    }
  }
  return (
    <div>
      <Header />
      <main className="signup">
        <div className="name1">
          <h1>HokieX</h1>
          <Form className="signup-form" onSubmit={handleSubmit}>
            <Form.Group className="mb-4" controlId="formBasicPassword">
              <Form.Label>Name</Form.Label>
              <Form.Control
                type="text"
                placeholder="Name"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                isInvalid={!!errors.name}
              />
              <Form.Control.Feedback type="invalid">
                {errors.name}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group className="mb-4" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="email"
                placeholder="Enter email"
                name="email"
                onChange={handleInputChange}
                value={formData.email}
                isInvalid={!!errors.email}
              />
              <Form.Control.Feedback type="invalid">
                {errors.email}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-4" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                placeholder="Password"
                name="password"
                onChange={handleInputChange}
                value={formData.password}
                isInvalid={!!errors.password}
              />

              <Form.Text id="passwordHelpBlock" muted>
                Your password must be 8-15 characters long with characters and
                numbers
              </Form.Text>

              <Form.Control.Feedback type="invalid">
                {errors.password}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group className="mb-4" controlId="formBasicPassword">
              <Form.Label>Confirmed Password</Form.Label>
              <Form.Control
                type="password"
                placeholder="Password"
                name="password2"
                onChange={handleInputChange}
                value={formData.password2}
                isInvalid={!!errors.password2}
              />

              <Form.Control.Feedback type="invalid">
                {errors.password2}
              </Form.Control.Feedback>
            </Form.Group>

            <Button id="signup-submit" variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </div>
      </main>
      <Footer />
    </div>
  );
}
