import { useFormContext, useFieldArray, FieldErrors } from "react-hook-form";

const Educations: React.FC = () => {
  const {
    control,
    register,
    formState: { errors },
  } = useFormContext();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "education",
  });

  return (
    <div
      style={{
        backgroundColor: "#b9f2ed",
        padding: "40px",
        marginBottom: "20px",
      }}
    >
      {fields.map((field, index) => (
        <div key={field.id} className="ls-widget">
          <div className="tabs-box">
            <div className="widget-title">
              <h4>Education</h4>
              {index !== 0 && (
                <button
                  type="button"
                  className="hc_button_when_bg_white"
                  onClick={() => remove(index)}
                >
                  ×
                </button>
              )}
            </div>
            <div className="widget-content">
              <div className="row">
                <div className="form-group col-lg-6 col-md-12">
                  <label>Degree Level</label>
                  <select
                    {...register(`education.${index}.degreeLevel`, {
                      required: "Degree Level is required",
                    })}
                    defaultValue=""
                  >
                    <option value="" disabled hidden>
                      Select Degree Level
                    </option>
                    <option value="High School Diploma">
                      High School Diploma (Secondary School)
                    </option>
                    <option value="Bachelor's">Bachelor's</option>
                    <option value="Post-graduate Diploma">
                      Post-graduate Diploma
                    </option>
                    <option value="Master's">Master's</option>
                    <option value="Doctorate">Doctorate</option>
                  </select>
                  {errors.education &&
                    Array.isArray(errors.education) &&
                    errors.education[index]?.degreeLevel && (
                      <p className="text-danger">
                        {errors.education[index].degreeLevel.message}
                      </p>
                    )}
                </div>
                {/* <div className="form-group col-lg-6 col-md-12">
                  <label>Degree Title</label>
                  <input
                    type="text"
                    {...register(`education.${index}.degreeTitle`, {
                      required: "Degree Title is required",
                    })}
                  />
                  {errors.education &&
                    Array.isArray(errors.education) &&
                    errors.education[index]?.degreeTitle && (
                      <p className="text-danger">
                        {errors.education[index].degreeTitle.message}
                      </p>
                    )}
                </div> */}
                <div className="form-group col-lg-6 col-md-12">
                  <label>Institution</label>
                  <input
                    type="text"
                    {...register(`education.${index}.institute`, {
                      required: "Institute is required",
                    })}
                  />
                  {errors.education &&
                    Array.isArray(errors.education) &&
                    errors.education[index]?.institute && (
                      <p className="text-danger">
                        {errors.education[index].institute.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-6 col-md-12">
                  <label>Result</label>
                  <input
                    type="text"
                    {...register(`education.${index}.result`, {
                      required: "Result is required",
                    })}
                  />
                  {errors.education &&
                    Array.isArray(errors.education) &&
                    errors.education[index]?.result && (
                      <p className="text-danger">
                        {errors.education[index].result.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-6 col-md-12">
                  <label>Status</label>
                  {/* <input
                    type="text"
                    {...register(`education.${index}.year`, {
                      required: "Year is required",
                      pattern: {
                        value: /^[0-9]{4}$/,
                        message: "Please enter a valid year (e.g., 2023)",
                      },
                    })}
                  /> */}
                  <select
                    {...register(`education.${index}.status`, {
                      required: "Status is required",
                    })}
                    defaultValue=""
                  >
                    <option value="" disabled hidden>
                      Select Status
                    </option>
                    <option value="Admitted">Admitted</option>
                    <option value="Enrolled">Currently Enrolled</option>
                    <option value="Completed">Completed</option>
                  </select>
                  {errors.education &&
                    Array.isArray(errors.education) &&
                    errors.education[index]?.status && (
                      <p className="text-danger">
                        {errors.education[index].status.message}
                      </p>
                    )}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className="pb-3">
        <button
          type="button"
          className="theme-btn btn-style-one"
          onClick={() => append({})}
        >
          Add New Education
        </button>
      </div>
    </div>
  );
};

export default Educations;