import React, { useState } from "react";

function EmployeeValidationForm() {
  const [data, setData] = useState({
    "name": "",
    "email": "",
    "employeeId": "",
    "joiningDate": ""
  })
  const [error, setError] = useState({
    "name": true,
    "email": true,
    "employeeId": true,
    "joiningDate": true,
  })
  const handleChange = (e) => {
    let value = e.target.value;
    setData(prev => {
      return {
        ...prev, [e.target.name]: value,
      }
    })
    setError(prev => {
      switch (e.target.name) {
        case "name":
          return {
            ...prev,
            "name": !(value.length >= 4 && /^[a-zA-Z ]+$/.test(value)),
          }
        case "email":
          return {
            ...prev,
            "email": !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
          }
        case "employeeId":
          return {
            ...prev,
            "employeeId": !/^[0-9]{6}$/.test(value),
          }
        case "joiningDate":
          const today = new Date("2025-04-11");
          const isValid = new Date(value) <= today;
          return {
            ...prev,
            joiningDate: !isValid,
          };
        default:
          return prev
      }
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setData({
      "name": "",
      "email": "",
      "employeeId": "",
      "joiningDate": "",
    });
    setError({
      "name": true,
      "email": true,
      "employeeId": true,
      "joiningDate": true,
    });
  }
  return (
    <form className="layout-column align-items-center mt-20" onSubmit={handleSubmit}>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-name">
        <input
          className="w-100"
          type="text"
          name="name"
          value={data.name}
          placeholder="Name"
          data-testid="input-name-test"
          onChange={handleChange}
        />
        {error.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"
          type="text"
          name="email"
          value={data.email}
          placeholder="Email"
          onChange={handleChange}
        />
        {error.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={data.employeeId}
          placeholder="Employee ID"
          onChange={handleChange}
        />
        {error.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"
          type="date"
          name="joiningDate"
          value={data.joiningDate}
          placeholder="Joining Date"
          onChange={handleChange}
        />
        {error.joiningDate && <p className="error mt-2">Joining Date cannot be in the future</p>}
      </div>
      <button data-testid="submit-btn" type="submit" disabled={error.name || error.email || error.employeeId || error.joiningDate}>
        Submit
      </button>
    </form>
  );
}

export default EmployeeValidationForm;