FormModal.js

"use client";

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, FormControl, FormLabel, Input, useToast } from '@chakra-ui/react';
import { useState } from 'react';

const FormModal = ({ isOpen, onClose, title, fields, formData, setFormData, onSubmit, onUpdate }) => {
  const toast = useToast();
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // Validação básica
    if (!value) setErrors(prev => ({ ...prev, [name]: 'Campo obrigatório' }));
    else setErrors(prev => ({ ...prev, [name]: '' }));
  };

  const handleSubmit = () => {
    const newErrors = {};
    fields.forEach(field => {
      if (!formData[field.name]) newErrors[field.name] = 'Campo obrigatório';
    });
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    if (formData.id) onUpdate(formData.id);
    else onSubmit();
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>{title}</ModalHeader>
        <ModalBody>
          {fields.map((field, index) => (
            <FormControl key={index} isInvalid={errors[field.name]}>
              <FormLabel>{field.label}</FormLabel>
              <Input
                type={field.type}
                name={field.name}
                value={formData[field.name] || ''}
                onChange={handleChange}
                placeholder={`Digite o ${field.label.toLowerCase()}`}
              />
              {errors[field.name] && <Text color="red.500" fontSize="sm">{errors[field.name]}</Text>}
            </FormControl>
          ))}
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>
            Salvar
          </Button>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default FormModal;