import { FormEvent, useState } from "react";
import { Button, FormField } from "@edr/ui-common";

export interface ConsignmentFormProps {
  onSubmit: (payload: {
    bookingId: string;
    trackingNumber: string;
    cargoType: string;
    weightKg: number;
    originStation: string;
    destinationStation: string;
  }) => void;
  isSubmitting?: boolean;
}

const ConsignmentForm = ({ onSubmit, isSubmitting }: ConsignmentFormProps) => {
  const [bookingId, setBookingId] = useState("");
  const [trackingNumber, setTrackingNumber] = useState("");
  const [cargoType, setCargoType] = useState("GENERAL");
  const [weightKg, setWeightKg] = useState("0");
  const [originStation, setOriginStation] = useState("");
  const [destinationStation, setDestinationStation] = useState("");

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit({
      bookingId,
      trackingNumber,
      cargoType,
      weightKg: Number(weightKg),
      originStation,
      destinationStation,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <FormField
        label="Booking ID"
        value={bookingId}
        onChange={(e) => setBookingId(e.target.value)}
        required
      />
      <FormField
        label="Tracking #"
        value={trackingNumber}
        onChange={(e) => setTrackingNumber(e.target.value)}
        required
      />
      <FormField
        label="Cargo type"
        value={cargoType}
        onChange={(e) => setCargoType(e.target.value)}
      />
      <FormField
        label="Weight (kg)"
        type="number"
        value={weightKg}
        onChange={(e) => setWeightKg(e.target.value)}
        min="0"
      />
      <FormField
        label="Origin station"
        value={originStation}
        onChange={(e) => setOriginStation(e.target.value)}
        required
      />
      <FormField
        label="Destination station"
        value={destinationStation}
        onChange={(e) => setDestinationStation(e.target.value)}
        required
      />
      <Button type="submit" isLoading={isSubmitting}>
        Create consignment
      </Button>
    </form>
  );
};

export default ConsignmentForm;
