The form should have:
● At least 2 select inputs and 4 text inputs
● Optional fields
● Radio button that controls additional two inputs (1 select, 1
text).
● Array inputs: Ability to add multiple nested entities (for
example, for projects, a user can add tasks. Each task should
have a “name” input and “status” select). Form: import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect } from 'react';
import styles from './ItemForm.module.css';

const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup
    .number()
    .typeError('Quantity must be a number')
    .required('Quantity is required')
    .min(1, 'Quantity must be at least 1'),
  location: yup.string().notRequired(),
  supplier: yup.string().notRequired(),
  supplierLocation: yup.string().notRequired(),
  showPriceDetails: yup
    .string()
    .oneOf(['yes', 'no'], 'Please select an option')
    .required('Please select an option'),

  priceType: yup
    .string()
    .when('showPriceDetails', {
      is: 'yes',
      then: schema => schema.required('Price Type is required'),
      otherwise: schema => schema.notRequired(),
    }),

  price: yup
    .number()
    .transform((value, originalValue) => (originalValue === '' ? undefined : value))
    .when('showPriceDetails', {
      is: 'yes',
      then: schema =>
        schema
          .required('Price is required')
          .typeError('Price must be a number')
          .min(1, 'Price must be at least 1'),
      otherwise: schema => schema.notRequired(),
    }),

  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});

export const ItemForm = ({ defaultValues, onSubmit }) => {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints',
  });

  const showPriceDetails = watch('showPriceDetails', 'no') === 'yes';

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  // Custom submit handler that logs affected fields
  const handleFormSubmit = (data) => {
    console.log('Submitted data:', data);
    // Log specific fields you want to track
    console.log('Name:', data.name);
    console.log('Category:', data.category);
    console.log('Quantity:', data.quantity);
    console.log('Supplier:', data.supplier);
    console.log('Show Price Details:', data.showPriceDetails);
    if (data.showPriceDetails === 'yes') {
      console.log('Price Type:', data.priceType);
      console.log('Price:', data.price);
    }
    console.log('Endpoints:', data.endpoints);
    onSubmit(data); // Call the original onSubmit prop
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(handleFormSubmit)} className="form-wrapper">
        <div className={${styles.formGrid} ${styles.grid3}}>
          <div className={styles.formGroup}>
            <label>Name*:</label>
            <input
              {...register('name')}
              className={errors.name ? styles.inputError : ''}
            />
            {errors.name && <p className={styles.errorMessage}>{errors.name.message}</p>}
          </div>

          <div className={styles.formGroup}>
            <label>Category*:</label>
            <select
              {...register('category')}
              className={errors.category ? styles.inputError : ''}
            >
              <option value="">Select category</option>
              <option value="Electronics">Electronics</option>
              <option value="Furniture">Furniture</option>
              <option value="Clothing">Clothing</option>
              <option value="Food">Food</option>
              <option value="Toys">Toys</option>
              <option value="Books">Books</option>
              <option value="Sports">Sports</option>
            </select>
            {errors.category && (
              <p className={styles.errorMessage}>{errors.category.message}</p>
            )}
          </div>

          <div className={styles.formGroup}>
            <label>Quantity*:</label>
            <input
              type="number"
              {...register('quantity')}
              className={errors.quantity ? styles.inputError : ''}
            />
            {errors.quantity && (
              <p className={styles.errorMessage}>{errors.quantity.message}</p>
            )}
          </div>
        </div>

        <div className={${styles.formGrid} ${styles.grid2}}>
          <div className={styles.formGroup}>
            <label>Supplier:</label>
            <input
              {...register('supplier')}
              className={errors.supplier ? styles.inputError : ''}
            />
            {errors.supplier && (
              <p className={styles.errorMessage}>{errors.supplier.message}</p>
            )}
          </div>

          <div className={styles.formGroup}>
            <label>Supplier Location:</label>
            <input
              {...register('supplierLocation')}
              className={errors.supplierLocation ? styles.inputError : ''}
            />
            {errors.supplierLocation && (
              <p className={styles.errorMessage}>{errors.supplierLocation.message}</p>
            )}
          </div>
        </div>

        <div className={styles.formGroup}>
          <label>Show Price Details?</label>
          <div className={styles.radioGroup}>
            <label>
              <input
                type="radio"
                value="yes"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails === 'yes'}
              />
              Yes
            </label>
            <label>
              <input
                type="radio"
                value="no"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails !== 'yes'}
              />
              No
            </label>
          </div>
          {errors.showPriceDetails && (
            <p className={styles.errorMessage}>{errors.showPriceDetails.message}</p>
          )}
        </div>

        {showPriceDetails && (
          <div className={${styles.formGrid} ${styles.grid2}}>
            <div className={styles.formGroup}>
              <label>Type:</label>
              <select
                {...register('priceType')}
                className={errors.priceType ? styles.inputError : ''}
              >
                <option value="">Select type</option>
                <option value="For Sale">For Sale</option>
                <option value="For Buying">For Buying</option>
              </select>
              {errors.priceType && (
                <p className={styles.errorMessage}>{errors.priceType.message}</p>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>Price:</label>
              <input
                type="number"
                {...register('price')}
                className={errors.price ? styles.inputError : ''}
                placeholder="Enter price"
              />
              {errors.price && (
                <p className={styles.errorMessage}>{errors.price.message}</p>
              )}
            </div>
          </div>
        )}
        
        <div className={${styles.formGroup} ${styles.fullWidth}}>
          <h3>Endpoints</h3>
          {fields.map((endpoint, index) => (
            <div key={endpoint.id} className={${styles.formGrid} ${styles.grid2}}>
              <div className={styles.formGroup}>
                <label>Endpoint {index + 1}:</label>
                <input
                  {...register(endpoints.${index}.endpoint)}
                  className={
                    errors.endpoints?.[index]?.endpoint ? styles.inputError : ''
                  }
                />
                {errors.endpoints?.[index]?.endpoint && (
                  <p className={styles.errorMessage}>
                    {errors.endpoints[index].endpoint.message}
                  </p>
                )}
              </div>

              <div className={styles.formGroup}>
                <label>Status:</label>
                <input
                  {...register(endpoints.${index}.status)}
                  className={
                    errors.endpoints?.[index]?.status ? styles.inputError : ''
                  }
                />
                {errors.endpoints?.[index]?.status && (
                  <p className={styles.errorMessage}>
                    {errors.endpoints[index].status.message}
                  </p>
                )}
              </div>

              <button
                type="button"
                className={styles.removeEndpointButton}
                onClick={() => remove(index)}
              >
                Remove Endpoint
              </button>
            </div>
          ))}
          <button
            type="button"
            className={styles.addEndpointButton}
            onClick={() => append({ endpoint: '', status: '' })}
          >
            Add Endpoint
          </button>
        </div>

        <button type="submit" className={styles.actionButton}>
          Submit
        </button>
      </form>
    </div>
  );
};