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

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

  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>Online Profile</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">
                {/* Online profile fields */}
                <div className="form-group col-lg-6 col-md-12">
                  <label>Enter Platform Name</label>
                  <input
                    type="text"
                    {...register(`onlineProfile.${index}.platformName`)}
                  />
                  {errors.onlineProfile &&
                    Array.isArray(errors.onlineProfile) &&
                    errors.onlineProfile[index]?.platformName && (
                      <p className="text-danger">
                        {errors.onlineProfile[index].platformName.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-6 col-md-12">
                  <label>Enter URL</label>
                  <input
                    type="text"
                    {...register(`onlineProfile.${index}.profileUrl`, {
                      pattern: {
                        value:
                          /^(https?|ftp):\/\/(([a-z\d]([a-z\d-]*[a-z\d])?\.)+[a-z]{2,}|localhost)(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i,
                        message: "Please enter a valid URL",
                      },
                    })}
                  />
                  {errors.onlineProfile &&
                    Array.isArray(errors.onlineProfile) &&
                    errors.onlineProfile[index]?.profileUrl && (
                      <p className="text-danger">
                        {errors.onlineProfile[index].profileUrl.message}
                      </p>
                    )}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className="pb-3">
        <button
          type="button"
          className="theme-btn btn-style-one"
          onClick={() => append({})}
        >
          Add New Online Profile
        </button>
      </div>
    </div>
  );
};

export default OnlineProfiles;