import React, {useState} from "react";
function EmployeeValidationForm() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [employeId, setEmployeeId] = useState("");
  const [joinDate, setJoinDate] = useState("");
  const [validator, setValidator] = useState({
    username:false,
    email:false,
    employeId:false,
    joinDate: false
  })

  const handleUserNameChange = (e)=>{
    setUsername(e.target.value);
    const regex = /^[A-Za-z\s]{4,}$/
    if(e!=null){
      setValidator((prev)=>({
        ...prev, username: regex.test(e.target.value)
      }))
    }
    else{
      setValidator((prev)=>({
        ...prev, username:false
      }))
    }
  }

  const handleEmailChange = (e)=>{
    setEmail(e.target.value);
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if(e!=null){
      setValidator((prev)=>({
        ...prev, email: regex.test(e.target.value)
      }))
    }
    else{
      setValidator((prev)=>({
        ...prev, email:false
      }))
    }
  }

  const handleEmployeeIdChange = (e)=>{
    setEmployeeId(e.target.value);
    const regex = /^\d{6}$/
    if(e!=null){
      setValidator((prev)=>({
        ...prev, employeId: regex.test(e.target.value)
      }))
    }
    else{
      setValidator((prev)=>({
        ...prev, employeId:false
      }))
    }
  }

  const handleJoinDateChange = (e)=>{
    setJoinDate(e.target.value);
    if(e!=null){
      const selectedDate = new Date(e.target.value);
      const today = new Date("12/31/2024");
      if(selectedDate>today){
        setValidator((prev)=>({
          ...prev, joinDate: false
        }))
      }
      else{
        setValidator((prev)=>({
          ...prev, joinDate: true
        }))
      }
    }
    else{
      setValidator((prev)=>({
        ...prev, joinDate:false
      }))
    }
  }

  const handleSubmit = (e)=>{
    e.preventDefault();
    if(validator.username && validator.email && validator.employeId && validator.joinDate){
      setValidator({
        username:false,email: false, employeId: false, joinDate: false
      })
      setUsername("")
      setEmail("")
      setJoinDate("")
      setEmployeeId("")
    }
  }

  return (
    <form onSubmit={handleSubmit}>
    <div className="layout-column align-items-center mt-20 ">
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-name">
        <input
          className="w-100"
          type="text"
          name="name"
          value={username}
          placeholder="Name"
          data-testid="input-name-test"
          onChange = {handleUserNameChange}
        />
        {!validator.username && <p className="error mt-2">
          Name must be at least 4 characters long and only contain letters and spaces
        </p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-email">
        <input
          className="w-100"
          type="text"
          name="email"
          value={email}
          placeholder="Email"
          onChange = {handleEmailChange}
        />
        {!validator.email && <p className="error mt-2">Email must be a valid email address</p> }
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-employee-id">
        <input
          className="w-100"
          type="text"
          name="employeeId"
          value={employeId}
          placeholder="Employee ID"
          onChange = {handleEmployeeIdChange}
        />
        {!validator.employeId && <p className="error mt-2">Employee ID must be exactly 6 digits</p> }
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-joining-date">
        <input
          className="w-100"
          type="date"
          name="joiningDate"
          value={joinDate}
          placeholder="Joining Date"
          onChange = {handleJoinDateChange}
        />
        {!validator.joinDate && <p className="error mt-2">Joining Date cannot be in the future</p>}
      </div>
      <button data-testid="submit-btn" type="submit" disabled = {!(validator.username && validator.email && validator.joinDate && validator.employeId)}>
        Submit
      </button>
    </div>
    </form>
  );
}

export default EmployeeValidationForm;