import React, { useState, useEffect } from 'react';
import styles from './ModifyForm.module.css';

function ModifyForm({ contactDetails, setContactDetails }) {
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    nickname: '',
  });

  // Initialize form with contactDetails when component mounts or contactDetails changes
  useEffect(() => {
    if (contactDetails) {
      setFormData({
        firstname: contactDetails.firstname || '',
        lastname: contactDetails.lastname || '',
        nickname: contactDetails.nickname || '',
      });
    }
  }, [contactDetails]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    const updatedFormData = {
      ...formData,
      [name]: value,
    };

    setFormData(updatedFormData);

    // Update parent state with the updated form data
    setContactDetails(updatedFormData);
  };

  return (
    <div className={styles.modifyForm}>
      <h3 className={styles.sectionTitle}>Edit Contact Information</h3>

      <div className={styles.formGroup}>
        <label htmlFor="firstname" className={styles.formLabel}>
          First Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="firstname"
            name="firstname"
            value={formData.firstname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's first name"
            required
            minLength="2"
          />
          <span className={styles.inputIcon}>👤</span>
        </div>
        <div className={styles.validationHint}>
          Required • Minimum 2 characters
        </div>
      </div>

      <div className={styles.formGroup}>
        <label htmlFor="lastname" className={styles.formLabel}>
          Last Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="lastname"
            name="lastname"
            value={formData.lastname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's last name"
            required
            minLength="2"
          />
          <span className={styles.inputIcon}>📇</span>
        </div>
        <div className={styles.validationHint}>
          Required • Minimum 2 characters
        </div>
      </div>

      <div className={styles.formGroup}>
        <label htmlFor="nickname" className={styles.formLabel}>
          Nickname
          <span className={styles.optionalIndicator}>(Optional)</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="nickname"
            name="nickname"
            value={formData.nickname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter a friendly nickname (optional)"
          />
          <span className={styles.inputIcon}>🌟</span>
        </div>
        <div className={styles.validationHint}>
          Optional • Leave empty if not needed
        </div>
      </div>

      <div className={styles.formInfo}>
        <p>
          Fields marked with <span className={styles.requiredIndicator}>*</span>{' '}
          are required. Nickname is optional and can be left blank.
        </p>
      </div>
    </div>
  );
}

export default ModifyForm;