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

import type { CreateBookingPayload } from "../../services/bookings.service";

export interface BookingFormProps {
  onSubmit: (payload: CreateBookingPayload) => void;
  isSubmitting?: boolean;
}

const BookingForm = ({ onSubmit, isSubmitting }: BookingFormProps) => {
  const [reference, setReference] = useState("");
  const [customerId, setCustomerId] = useState("");
  const [scheduledDate, setScheduledDate] = useState("");
  const [totalAmount, setTotalAmount] = useState("0");

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit({
      reference,
      customerId,
      scheduledDate,
      totalAmount: Number(totalAmount),
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <FormField
        label="Reference"
        value={reference}
        onChange={(e) => setReference(e.target.value)}
        required
      />
      <FormField
        label="Customer ID"
        value={customerId}
        onChange={(e) => setCustomerId(e.target.value)}
        required
      />
      <FormField
        label="Scheduled date"
        type="date"
        value={scheduledDate}
        onChange={(e) => setScheduledDate(e.target.value)}
        required
      />
      <FormField
        label="Total amount"
        type="number"
        value={totalAmount}
        onChange={(e) => setTotalAmount(e.target.value)}
        min="0"
      />
      <Button type="submit" isLoading={isSubmitting}>
        Create booking
      </Button>
    </form>
  );
};

export default BookingForm;
