import React from "react";
import { useState, useEffect } from "react"

function EmployeeValidationForm() {
  const [details, setDetails] = useState({
    name: "",
    email: "",
    employeeId: "",
    joiningDate: "",
  })

  const [isValidDetails, setIsValidDetails] = useState({
    name: false,
    email: false,
    employeeId: false,
    joiningDate: false
  })

  const regexValidName = /^[A-Za-z\s]*$/
  const regexValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  const regexValidId = /^\d+$/

  const validateFields = (name, value) => {
    let isValid = false

    switch (name) {
      case "name":
        isValid = value.length >= 4 && regexValidName.test(value);
        break;
      case "email":
        isValid = regexValidEmail.test(value);
        break;
      case "employeeId":
        isValid = regexValidId.test(value) && value.length === 6
        break;
      case "joiningDate":
        const today = new Date()
        const inputDate = new Date(value)
        isValid = !isNaN(inputDate.getTime()) && inputDate <= today
        break;
      default:
        break;
    }

    return isValid
  }

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    setDetails((prevDetails) => ({
      ...prevDetails,
      [name]: value
    }))

    const isFieldValid = validateFields(name, value)
    setIsValidDetails((prevState) => ({
      ...prevState,
      [name]: isFieldValid
    }))
  }

  const onSubmit = () => {
    setDetails((prevDetails) => ({
      ...prevDetails,
      name: "",
      email: "",
      employeeId: "",
      joiningDate: "",
    }))
  }


  return (
    <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"
          onChange={handleInputChange}
          value={details.name}
          type="text"
          name="name"
          placeholder="Name"
          data-testid="input-name-test"
        />
        {!isValidDetails.name && (<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"
          onChange={handleInputChange}
          value={details.email}
          type="text"
          name="email"
         
          placeholder="Email"
        />
        {!isValidDetails.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"
          onChange={handleInputChange}
          value={details.employeeId}
          type="text"
          name="employeeId"
          
          placeholder="Employee ID"
        />
          {!isValidDetails.employeeId && (
            <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"
          onChange={handleInputChange}
          value={details.joiningDate}
          type="date"
          name="joiningDate"
          placeholder="Joining Date"
        />
         {!isValidDetails.joiningDate && (
          <p className="error mt-2">Joining Date cannot be in the future</p>
         )}
      </div>
      <button onClick={onSubmit} data-testid="submit-btn" type="submit" disabled={!Object.values(isValidDetails).every(Boolean)}>
        Submit
      </button>
    </div>
  );
}

export default EmployeeValidationForm;