import { Control } from "react-hook-form";
import { TripFormData } from "../schemas/tripFormSchema";
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface NewTravelerFormProps {
  control: Control<TripFormData>;
  onCancel: () => void;
  onSubmit: () => void;
}

export function NewTravelerForm({ control, onCancel, onSubmit }: NewTravelerFormProps) {
  const handleSubmit = (event: React.MouseEvent) => {
    // Empêcher la propagation pour éviter les problèmes avec le Popover
    event.preventDefault();
    event.stopPropagation();

    // Vérifier si les champs sont valides avant de soumettre
    const nameValue = control._formValues.newTraveler?.name;
    const emailValue = control._formValues.newTraveler?.email;

    if (!nameValue || !emailValue) {
      console.error("Formulaire incomplet:", { name: nameValue, email: emailValue });
      return;
    }

    onSubmit();
  };

  const handleCancel = (event: React.MouseEvent) => {
    // Empêcher la propagation pour éviter les problèmes avec le Popover
    event.preventDefault();
    event.stopPropagation();
    onCancel();
  };

  return (
    <div className="p-4 space-y-4" onClick={(e) => e.stopPropagation()}>
      <h4 className="font-medium">Nouveau voyageur</h4>
      <FormField
        control={control}
        name="newTraveler.name"
        render={({ field: nameField }) => (
          <FormItem>
            <FormLabel>Nom</FormLabel>
            <FormControl>
              <Input
                placeholder="Jean Dupont"
                {...nameField}
                value={nameField.value || ""}
                autoFocus
                onClick={(e) => e.stopPropagation()}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={control}
        name="newTraveler.email"
        render={({ field: emailField }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input
                type="email"
                placeholder="jean.dupont@exemple.com"
                {...emailField}
                value={emailField.value || ""}
                onClick={(e) => e.stopPropagation()}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <div className="flex gap-2 pt-2">
        <Button
          type="button"
          variant="outline"
          className="w-full"
          onClick={handleCancel}
        >
          Annuler
        </Button>
        <Button
          type="button"
          className="w-full"
          onClick={handleSubmit}
        >
          Créer
        </Button>
      </div>
    </div>
  );
}