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

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

  return (
    <div
      style={{
        backgroundColor: "#b9f2ed",
        padding: "40px",
        marginBottom: "20px",
      }}
    >
      {fields.map((section, index) => (
        <div key={section.id} className="ls-widget">
          <div className="tabs-box">
            <div className="widget-title">
              <h4>Projects</h4>
              {index !== 0 && ( // Render delete button for sections other than the first one
                <button
                  className="hc_button_when_bg_white"
                  onClick={() => remove(index)}
                >
                  ×
                </button>
              )}
            </div>
            <div className="widget-content">
              <div className="row">
                {/* Project fields */}
                <div className="form-group col-lg-6 col-md-12">
                  <label>Project Title</label>
                  <input
                    type="text"
                    {...register(`projects.${index}.projectTitle`, {
                      required: "Project title is required",
                    })}
                  />
                  {errors.projects &&
                    Array.isArray(errors.projects) &&
                    errors.projects[index]?.projectTitle && (
                      <p className="text-danger">
                        {errors.projects[index].projectTitle.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-12 col-md-12">
                  <label>Project Summary</label>
                  <textarea
                    {...register(`projects.${index}.projectDetails`, {
                      required: "Project Details is required",
                    })}
                  />
                  {errors.projects &&
                    Array.isArray(errors.projects) &&
                    errors.projects[index]?.projectDetails && (
                      <p className="text-danger">
                        {errors.projects[index].projectDetails.message}
                      </p>
                    )}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className="pb-3">
        <button
          type="button"
          className="theme-btn btn-style-one"
          onClick={() => append({})}
        >
          Add New Project
        </button>
      </div>
    </div>
  );
};

export default Projects;