import { useQuery } from "@tanstack/react-query";
import MenuItem from "@mui/material/MenuItem";
import { Select } from "../../ui";
import { warehouseReservationListOptions } from "../../lib/queries/warehouse";

interface ReservationPickerProps {
  itemId: number | null;
  projectId: number | null;
  value: number | null;
  onChange: (reservationId: number | null, remainingQty: number) => void;
}

export default function ReservationPicker({
  itemId,
  projectId,
  value,
  onChange,
}: ReservationPickerProps) {
  const { data: result } = useQuery(
    warehouseReservationListOptions({
      item_id: itemId ?? undefined,
      project_id: projectId ?? undefined,
      status: "ACTIVE",
      perPage: 100,
    }),
  );

  const reservations = result?.data ?? [];

  return (
    <Select
      value={value == null ? "" : String(value)}
      onChange={(val) => {
        if (!val) {
          onChange(null, 0);
          return;
        }
        const reservationId = Number(val);
        const reservation = reservations.find((r) => r.id === reservationId);
        if (reservation) {
          onChange(reservationId, Number(reservation.remaining_qty));
        }
      }}
    >
      <MenuItem value="">— žádná rezervace —</MenuItem>
      {reservations.map((r) => (
        <MenuItem key={r.id} value={String(r.id)}>
          R{r.id} — {r.project?.name ?? `Projekt #${r.project_id}`} — zbývá:{" "}
          {Number(r.remaining_qty)} {r.item?.unit ?? "ks"}
        </MenuItem>
      ))}
    </Select>
  );
}