import { useState, useCallback } from 'react';

const useForm = (initialValues, onSubmit) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = useCallback((event) => {
    const { name, value } = event.target;
    setValues((prevValues) => ({ ...prevValues, [name]: value }));
    // Optionally clear error for the changed field
    setErrors((prevErrors) => ({ ...prevErrors, [name]: undefined }));
  }, []);

  const handleSubmit = useCallback(async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    setErrors({}); // Clear previous errors

    // Basic validation example (can be expanded)
    const newErrors = {};
    for (const key in values) {
      if (!values[key]) {
        newErrors[key] = `${key} is required`;
      }
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      setIsSubmitting(false);
      return;
    }

    try {
      await onSubmit(values);
    } catch (error) {
      // Handle submission errors (e.g., from API)
      setErrors(prevErrors => ({ ...prevErrors, submit: error.message || 'Submission failed.' }));
    } finally {
      setIsSubmitting(false);
    }
  }, [values, onSubmit]);

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting,
    setValues, // Allow external update if needed
    setErrors, // Allow external setting of errors
  };
};

export default useForm;

/* Example Usage:
import React from 'react';
import useForm from './useForm';

function ContactForm() {
  const handleSubmitForm = async (formData) => {
    console.log('Submitting form:', formData);
    // Simulate API call
    return new Promise(resolve => setTimeout(() => {
      alert(`Form Submitted: ${JSON.stringify(formData)}`);
      resolve();
    }, 1000));
  };

  const { values, errors, handleChange, handleSubmit, isSubmitting } = useForm(
    { name: '', email: '', message: '' },
    handleSubmitForm
  );

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={values.name}
          onChange={handleChange}
        />
        {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea
          id="message"
          name="message"
          value={values.message}
          onChange={handleChange}
        />
        {errors.message && <p style={{ color: 'red' }}>{errors.message}</p>}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {errors.submit && <p style={{ color: 'red' }}>{errors.submit}</p>}
    </form>
  );
}
*/